Creating HTML and CSS Markup - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 142

What About the Media Queries?
Because you kept the changes so simple, no updates to the media queries are required; it will work as expected right
out of the box.

Developing the Room View for Presenters
The final step before moving on to the back-end functionality is to create the markup for the presenter view. This view
is the same as the attendee view in every way except for three things:

• There is no “ask a question” form

• There is an “answer” form and button instead of a “vote” button

• There is a form beneath the room information with a link to the room and a button

to close the form

Reworking the Existing Markup
Create a new file called presenter.html and copy the contents of attendee-active.html into it.
Next, remove the “ask a question” form markup from above the questions and remove the “vote” form from
each question, replacing it with an “answer” form and button. Add a new form inside the <header> tag with the room
information that has a disabled text input with the room's uniform resource indicator (URI) as its value and add a
submit button with the copy “Close This Room” that will allow the presenter to end the session.
All in all, there are very few changes. The only differences are those within the <section> element:

<section>

<header>
<h2>Realtime Web Apps &amp; the Mobile Internet</h2>
<p>
Presented by Jason Lengstorf
(<a href="mailto:[e-mail]" tabindex="100">email</a>)
</p>
<form id="close-this-room">
<label>
Link to your room.
<input type="text" name="room-url"
value=" http://realtime.local/room/1234 "
disabled />
</label>
<input type="submit" value="Close This Room" />
</form><!--/#close-this-room-->
</header>
<ul id="questions" class="presenter">
<li id="question-1"
data-count="27">