CS50/Lab 8 Trivia at main · Dada010101/CS50 · 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
72
73
<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        <title>Trivia!</title>
        <script>
            // TODO: Add code to check answers to questions
            document.addEventListener('DOMContentLoaded', function() {

                let correct = document.querySelector('.correct');
                correct.addEventListener('click', function(event) {
                    correct.style.backgroundColor = 'green';
                    document.querySelector('#feedback1').innerHTML = 'Correct!';
                    });

                let incorrects = document.querySelectorAll('.incorrect');
                for(let i = 0; i < incorrects.length; i++)
                {
                    incorrects[i].addEventListener('click', function(event) {
                    incorrects[i].style.backgroundColor = 'red';
                    document.querySelector('#feedback1').innerHTML = 'Incorrect';
                    });
                }

                document.querySelector('#check').addEventListener('click', function(){
                   let input = document.querySelector('input');
                   if(input.value == 'blue'){
                       input.style.backgroundColor = 'green';
                       document.querySelector('#feedback2').innerHTML = 'Correct!';
                   } else {
                       input.style.backgroundColor = 'red';
                       document.querySelector('#feedback2').innerHTML = 'Incorrect';
                   }
                });

            });

        </script>
    </head>
    <body>
        <div class="header">
            <h1>Trivia!</h1>
        </div>

        <div class="container">
            <div class="section">
                <h2>Part 1: Multiple Choice </h2>
                <hr>
                <!-- TODO: Add multiple choice question here -->
                <h3>Hello?</h3>
                <button class = "incorrect">Hhhello</button>
                <button class = "incorrect">Helloooo</button>
                <button class = "incorrect">Heeello</button>
                <button class = "correct">Hello, how are u</button>

                <p id = "feedback1"></p>
            </div>

            <div class="section">
                <h2>Part 2: Free Response</h2>
                <hr>
                <!-- TODO: Add free response question here -->
                <h3>Color of sky is ?</h3>
                <input type = 'text'></input>
                <button id = "check">Check Answer</button>

                <p id = "feedback2"></p>
            </div>
        </div>
    </body>
</html>