Lesson Twenty Two: How it Works - HTML

  1. <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>The Mollusks Reading Comprehension Challenge</title>
    <link rel="stylesheet" type="text/css" href="readingcomp.css">
    </head>
    The above section sets up your file to be recognized by the browser as an HTML file and writes the title to the browser tab. It also links your HTML file to the readingcomp.css file to get the design information.

  2. <body>
    <h1>The Mollusks Reading Comprehension Challenge</h1>
    <div>
    <h2>Where do most mollusks live?</h2>
    <p id="answer1"><|input type="button" id="select1" value="select" onclick="buttonincorrect();">In the sky</p>
    <p id="answer2"><|input type="button" id="select2" value="select" onclick="buttonincorrect();">On land</p>
    <p id="answer3"><|input type="button" id="select3" value="select" onclick="buttoncorrect();">In water</p>
    <p id="answer4"><|input type="button" id="select4" value="select" onclick="buttonincorrect();">On mountain tops</p>
    The answer1, answer2, answer3, and answer4 ids allow the JavaScript code to return the correct or incorrect innerHTML based on the users selection presented by the select buttons. The buttoncorrect or buttonincorrect are function calls that process the corresponding JavaScript code.

  3. <p><|input type="button" id="p1" value="">Points</p>
    <p><|input type="button" id="tp1" value="">Total Points <|input type="button" value="Reset" onclick="location.reload();"></p>
    </div>
    The input button with the id of p1 is used to return a score for the individual question that resides within the div. The id of tp1 is used to return a running score that is calculated by the JavaScript. The onclick="location.reload();" method resets the page so that the user can make another attempt at the challenge. The div is used to end each question which divides the sections and allows unique design for each question. Note: you could also use the section tag for this purpose.

  4. <script src="readingcomp.js"></script>
    <body>
    <html>
    This section links the HTML code to the JavaScript code and ends the HTML file.

Lesson Twenty Three: How it Works - CSS