skyhighchessleague.com/Quiz.html at main · JesterCoding/skyhighchessleague.com · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz - Sky High Chess League</title>
</head>
<body>
    <h1>Quiz</h1>

    <form id="quizForm">
        <div id="questionContainer" class="hidden">
            <div id="question"></div>
            <input type="text" id="answer" placeholder="Your Answer">
            <button type="button" onclick="checkAnswer()">Check Answer</button>
            <span id="result"></span>
        </div>

        <button type="button" onclick="backHome()">Back Home</button>
    </form>

    <script>
        const questions = [
            {
                question: "Who is the owner of SKYLE?",
                answer: "Hitansh"
            },
            {
                question: "Who is the game dev?",
                answer: "Hugo"
            },
            {
                question: "How many SAs are there?",
                answer: "four"
            }
        ];

        function backHome() {
            window.location.href = "index.html"; // Navigate back to homepage
        }

        function getRandomQuestion() {
            const randomIndex = Math.floor(Math.random() * questions.length);
            return questions[randomIndex];
        }

        function displayQuestion() {
            const randomQuestion = getRandomQuestion();
            document.getElementById("question").textContent = randomQuestion.question;
            document.getElementById("questionContainer").classList.remove("hidden");
        }

        function checkAnswer() {
            const userAnswer = document.getElementById("answer").value.trim().toLowerCase();
            const correctAnswer = questions.find(q => q.question === document.getElementById("question").textContent).answer;
            const resultSpan = document.getElementById("result");

            if (userAnswer === correctAnswer.toLowerCase()) {
                resultSpan.textContent = "Correct";
            } else {
                resultSpan.textContent = "Incorrect";
            }
        }

        displayQuestion(); // Display a random question when the page loads
    </script>
</body>
</html>