CodeQuizChallenge/index.html at main · lo-mido/CodeQuizChallenge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Quiz</title>
    <link rel="stylesheet" href="./assets/css/style.css">
</head>

<body>
    <header>
        <a href="scores.html">
            <h3>View High Scores</h3>
        </a>

        <p>Time: <label for="" id="timer">0</label> </p>
    </header>

    <main>
        <section id="intro-section" >
            <h1>Coding Quiz Challenge</h1>
            <p>This code quiz will be based on coding topics, if you get a incorrect answer, you will be penalized on time, at the end you will be prompted to enter in your initials so that your score and initials are saved together.</p>
            <button id="start-btn">Start Quiz</button>
        </section>


        <section id="question-section" class="hide">
            <h2 id="title">question 1</h2>
            <ul>
                <li><button class="choices">choice 1</button></li>
                <li><button class="choices">choice 2</button></li>
                <li><button class="choices">choice 3</button></li>
                <li><button class="choices">choice 4</button></li>
            </ul>
<h3 id="answers" > </h3>
        </section>

        <section id="initial-section" class="hide">
           <h3>All Done!</h3>
           <p>Your final score is <label for="" id="score">80</label>   </p>

           Enter Initials: <input type="text" id="initial-input">
           <button id="save-btn">Save</button>
        </section>
        <section id="highscore-section" class="hide">
            <h3>High Scores</h3>
             <ol>
                <li>PL-80</li>
             </ol>

             <button id="go-back-bt">Go Back</button>
             <button id="clear-btn">Clear History</button>
        </section>


    </main>

    <footer>

    </footer>

    <script src="./assets/js/script.js"></script>
</body>

</html>
<!-- In this index file, you can see that the javascript file is embedded into the page as an external file. code lines 63. The CSS is included also as an external link line 8.*/ -->
 <!-- Code Lines  -->
<!-- code line 17 is the label that displays the timer -->
<!-- Line 13 link to the scores.html page -->
<!-- Lines 21-25 button to start to the quiz -->