> For the complete documentation index, see [llms.txt](https://docs.idew.org/code-trivia-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.idew.org/code-trivia-app/code-template/template-build-tutorial/3.-question-screen.md).

# 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.**&#x20;

{% code title="HTML" %}

```markup
<!-------------- 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>
```

{% endcode %}

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