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

# 1. Screens as Containers

### HTML for the Screen Containers

Below you see the HTML for the three screen "containers" as `<div>` elements. We will add more detail to each screen later. Notice that each screen has `class='screen'` . This will allow us to easily change the style (CSS) of all three screens later in the same way. Also, notice that each screen has a unique `id` that will allow us to target each screen in a particular way later.&#x20;

**Copy the HTML code and paste it into a new&#x20;*****index.html*****&#x20;file, or use the CodePen version if you are starting with** [**CodePen's HTML**](https://codepen.io/pen/)**.** The browser page preview is not exciting, but it should contain text from all three screens.

{% tabs %}
{% tab title="HTML - complete index.html file" %}

```markup
<!DOCTYPE html>
<html>

<head>
  <title>iDEW Trivia</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <!-------------- WELCOME SCREEN --------------->
  <div class='screen' id='welcome-screen'>
    <h1>Welcome screen.</h1>
  </div>

  <!-------------- QUESTION SCREEN --------------->
  <div class='screen' id='question-screen'>
    <h1>Question screen.</h1>
  </div>

  <!-------------- THANK YOU SCREEN --------------->
  <div class='screen' id='thankyou-screen'>
    <h1>Thank you screen.</h1>
  </div>
  
  <script src="script.js"></script>
</body>

</html>
```

{% endtab %}

{% tab title="HTML - CodePen version with body only" %}

```markup
<!-------------- WELCOME SCREEN --------------->
<div class='screen' id='welcome-screen'>
  <h1>Welcome screen.</h1>
</div>

<!-------------- QUESTION SCREEN --------------->
<div class='screen' id='question-screen'>
  <h1>Question screen.</h1>
</div>

<!-------------- THANK YOU SCREEN --------------->
<div class='screen' id='thankyou-screen'>
  <h1>Thank you screen.</h1>
</div>
```

{% endtab %}
{% endtabs %}

>

{% hint style="info" %}

### **This is single page web app.**&#x20;

What is a single page web app? Most traditional web sites are a collection of HTML files (pages) that link to each other. With a single page web app you will create a single HTML file that contain different views (we call them *screens* in our case) that you *hide* or *show* depending on the *state* of the app.&#x20;

For example, in the trivia game, you will *hide* the question and thank you screens at the beginning and *show* the welcome screen. When the visitor starts the game, you will *hide* the welcome screen and *show* the question screen, and so on.

Don't worry if this isn't totally clear yet. It will make more sense when we get to the JavaScript programming part later.
{% endhint %}

### CSS for the Body and Screens

Let's add a little style to our screens next. In the code below notice how the `body` , which contains all contents of the page, is given a background color of "gray" and a margin of "0". This gives us a nice edge-to-edge background for placing our screen content.&#x20;

Next you will see several styles being applied to screens, since `.screen` affects all elements with that class. Notice how `background-color` uses `rgba( )` so that we can "see through" the screen a bit to the background. You will want this feature later. The rest of the styling has to do with sizing the screens and content in a way that fits nicely on any device, and you will probably want to leave these elements alone.

**Copy the CSS code below into your&#x20;*****style.css*****&#x20;file and notice the change. You will need to scroll down in the live preview to see all the screens now.**

{% code title="CSS" %}

```css
body {
  margin: 0;
  background-color: gray;
}

.screen {
  background-color: rgba(255,255,255,.5);
  box-sizing: border-box;
  margin: 15px auto;
  padding: 15px;
  max-width: 700px;
  width: calc(100vw - 30px);
  height: calc(100vh - 30px);
}
```

{% endcode %}

### **Save your Code before the next step!**


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.launchboard.app/cxd/code-trivia-app-1/code-template/template-build-tutorial/1.-screens-as-containers.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.