3. Question Screen

HTML for Basic Question Screen Content

Take a look at the code below and carefully review the nested elements in this block along with the classes and ids used. The <div> with an id = "answer-set" encloses the four answer buttons to help with shuffling answers later on. We wouldn't want the correct answer to always be on top, would we? :) Also, notice the <div> with id = "feedback" that can be used to give a player feedback after answering.

Update your question screen HTML to match the code below.

HTML

<!-------------- QUESTION SCREEN --------------->
<div class='screen' id='question-screen'>
  <h4 id="category">Category Name</h4>
  <h1 id="question">Question goes here?</h1>
  <div id="answer-set">
    <button class="answer-btn" id="correctAnswer">Correct Answer</button>
    <button class="answer-btn" id="incorrectAnswer1">Wrong Answer</button>
    <button class="answer-btn" id="incorrectAnswer2">Wrong Answer</button>
    <button class="answer-btn" id="incorrectAnswer3">Wrong Answer</button>
  </div>
  <h1 id="feedback">Feedback will go here.</h1>
</div>

No additional CSS needed for the question screen, since we already added style for buttons and the screen class. Yea!