aser-dev.github.io/chemistry.html at main · iOssme/aser-dev.github.io · 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
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>biology mcq</title>
    <head>
      <body>
        <div style='transform: scale(0.65); position: relative; top: -100px;'>
            <h1>The nuclei which lie at the left side of the stability belt reaches its stability by emitting ...</h1>
            <p>Choose 1 answer</p>
            <hr />

            <div id='block-11' style='padding: 10px;'>
              <label for='option-11' style=' padding: 5px; font-size: 2.5rem;'>
                <input type='radio' name='option' value='6/24' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                beta particle</label>
              <span id='result-11'></span>
            </div>
            <hr />

            <div id='block-12' style='padding: 10px;'>
              <label for='option-12' style=' padding: 5px; font-size: 2.5rem;'>
                <input type='radio' name='option' value='6' id='option-12' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                gamma ray</label>
              <span id='result-12'></span>
            </div>
            <hr />

            <div id='block-13' style='padding: 10px;'>
              <label for='option-13' style=' padding: 5px; font-size: 2.5rem;'>
                <input type='radio' name='option' value='1/3' id='option-13' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                alpha particle</label>
              <span id='result-13'></span>
            </div>
            <hr />

            <div id='block-14' style='padding: 10px;'>
              <label for='option-14' style=' padding: 5px; font-size: 2.5rem;'>
                <input type='radio' name='option' value='1/6' id='option-14' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                positron</label>
              <span id='result-14'></span>
            </div>
            <hr />
            <button type='button' onclick='displayAnswer1()' style='width: 500px; height: 80px; border-radius: 17px; background-color: rgb(52, 148, 14); font-size: 50px; color: aliceblue;'>Submit</button>
          </div>
          <a id='showanswer1'></a>
          <script>
            //    The function evaluates the answer and displays result
            function displayAnswer1() {
              if (document.getElementById('option-11').checked) {
                document.getElementById('block-11').style.border = '3px solid limegreen'
                document.getElementById('result-11').style.color = 'limegreen'
                document.getElementById('result-11').innerHTML = 'Correct!'
              }
              if (document.getElementById('option-12').checked) {
                document.getElementById('block-12').style.border = '3px solid red'
                document.getElementById('result-12').style.color = 'red'
                document.getElementById('result-12').innerHTML = 'Incorrect!'
                showCorrectAnswer1()
              }
              if (document.getElementById('option-13').checked) {
                document.getElementById('block-13').style.border = '3px solid red'
                document.getElementById('result-13').style.color = 'red'
                document.getElementById('result-13').innerHTML = 'Incorrect!'
                showCorrectAnswer1()
              }
              if (document.getElementById('option-14').checked) {
                document.getElementById('block-14').style.border = '3px solid red'
                document.getElementById('result-14').style.color = 'red'
                document.getElementById('result-14').innerHTML = 'Incorrect!'
                showCorrectAnswer1()
              }
            }
            // the functon displays the link to the correct answer
            function showCorrectAnswer1() {
              let showAnswer1 = document.createElement('p')
              showAnswer1.innerHTML = 'Show Corrent Answer'
              showAnswer1.style.position = 'relative'
              showAnswer1.style.top = '-180px'
              showAnswer1.style.fontSize = '1.75rem'
              document.getElementById('showanswer1').appendChild(showAnswer1)
              showAnswer1.addEventListener('click', () => {
                document.getElementById('block-11').style.border = '3px solid limegreen'
                document.getElementById('result-11').style.color = 'limegreen'
                document.getElementById('result-11').innerHTML = 'Correct!'
                document.getElementById('showanswer1').removeChild(showAnswer1)
              })
            }
          </script>
      </body>