QuantumSummerCamp/project2.html at main · QuantumMTSU/QuantumSummerCamp · 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
<!DOCTYPE html>
<html>
  <head>
    <title>Interactive Quiz</title>
  </head>
  <body>
    <h1>Interactive Quiz</h1>

    <h2>Practice Questions</h2>
    <h3>Ancilla practice</h3>
    <p>For each statement, choose whether it is true or false.</p>
    <p>A function with 4 inputs and 2 outputs can be reversible.</p>
    <label><input type="radio" name="q1" value="true">True</label><br>
    <label><input type="radio" name="q1" value="false">False</label><br><br>

    <h3>Quantum circuit practice</h3>
    <p>What is the output of the following quantum circuit?</p>
    <img src="https://i.stack.imgur.com/Rwexl.png" alt="Quantum circuit" style="width:200px;height:150px;">
    <br><br>
    <label><input type="radio" name="q2" value="00">00</label><br>
    <label><input type="radio" name="q2" value="01">01</label><br>
    <label><input type="radio" name="q2" value="10">10</label><br>
    <label><input type="radio" name="q2" value="11">11</label><br><br>

    <button onclick="submitQuiz()">Submit</button>
    <br><br>
    <div id="result"></div>

    <script>
      function submitQuiz() {
        var correctAnswers = 0;
        var q1Answer = document.querySelector('input[name="q1"]:checked').value;
        if (q1Answer === "true") {
          correctAnswers++;
        }
        var q2Answer = document.querySelector('input[name="q2"]:checked').value;
        if (q2Answer === "11") {
          correctAnswers++;
        }
        document.getElementById("result").innerHTML = "You got " + correctAnswers + " out of 2 questions correct!";
      }
    </script>
  </body>
</html>