KBC-using-js-audio-visuals-/3.html at main · DhruvOz11/KBC-using-js-audio-visuals- · 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz Question Page</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="a.css">
</head>

<body style=" background: url(ezgif-3-a5dddf6330.gif); background-repeat: no-repeat; background-size: cover;">

    <audio id="audioCorrect">
        <source src="R.mp3">
    </audio>
    <audio id="audioIncorrect">
        <source src="w.mp3">
    </audio>
    <audio id="qa3">
    <source src="q3.mp3">
</audio>

    <nav class="navbar">
        <!-- Other navbar content -->
        <div class="answer">Life-Lines</div>
        <div class="lifeline" id="lifeline1">50:50</div>
        <div class="lifeline" id="lifeline2">Google</div>
        <div class="lifeline" id="lifeline3">Expert's Choice</div>
        <div class="answer">
            <p style="display:inline" id="ans"></p>
        </div>
    </nav>
    <aside class="sidebar">
        <div class="box">
            <div class="name">Player: <p id="player", style="display: inline;"></p></div>
            <div
                style="color: rgb(0, 0, 0);background-color: gold; border-radius: 9px; font-size: larger;font-weight: 500;">
                Total Winnings:</div>
            <div class="item">₹1,00,00,000/-</div>
            <div class="item">₹75,00,000/-</div>
            <div class="item">₹50,00,000/-</div>
            <div class="item">₹25,00,000/-</div>
            <div class="item">₹12,40,000/-</div>
            <div class="item">₹4,00,000/-</div>
            <div class="item" >₹1,00,000/-</div>
            <div class="item" style="background-color: gold; color: black;">₹5,000/-</div>
            <div class="item">₹2,000/-</div>
            <div class="item">₹1,000/-</div>
        </div>
    </aside>

    <div class="container" style="margin-top: -16vh;">
        <div class="row">
            <div class="col-md-12">
                <div class="question-box">
                    <p id="que1" style="font-weight: 600; font-size: 22px;">What collective term for a group of
                        Middle-Eastern countries<br> comes from the fact that they border a common waterbody ?</p>
                        <div class="options">
                            <div id="option1" class="option" data-answer="A" onclick="selectOption(this)">
                                <p style="color: gold; display: inline;">A:</p>
                                <p id="op1" style="color: white; display: inline;"> Gulf  </p>
                        </div>
                        <div id="option2" class="option" data-answer="B" onclick="selectOption(this)">
                            <p style="color: gold; display: inline;">B:</p>
                            <p id="op2" style="color: white; display: inline;"> Wave  </p>
                        </div>
                    </div>
                    <div class="options">
                        <div id="option3" class="option" data-answer="C" onclick="selectOption(this)">
                            <p style="color: gold; display: inline;">C:</p>
                            <p id="op3" style="color: white; display: inline;"> Lake  </p>
                        </div>
                        <div id="option4" class="option" data-answer="D" onclick="selectOption(this)">
                            <p style="color: gold; display: inline;">D:</p>
                            <p id="op4" style="color: white; display: inline;"> Ocean  </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="3.js"></script>
    <script src="count.js"></script>

    <script>
        function selectOption(option) {
            var options = document.querySelectorAll('.option-box');
            options.forEach(function (opt) {
                opt.classList.remove('selected');
            });
            option.classList.add('selected');
        }
    </script>

</body>

</html>