Multiple Choice Quiz App Using JavaScript

.question {
  margin-bottom: 20px;
}

.question p {
  font-weight: bold;
  margin-bottom: 10px;
}

input[type="radio"] {
  margin-right: 10px;
}

label {
  margin-right: 20px;
}

#result {
  font-weight: bold;
  color: #00698f;
}

</style>
<button onclick="showQuiz()">Show Quiz</button>
<div id="quiz" style="display: none;">
  <h2>Quiz Time!</h2>
  <div class="question">
    <p>What is the capital of France?</p>
    <input type="radio" id="paris" name="q1">
    <label for="paris">Paris</label>
    <input type="radio" id="berlin" name="q1">
    <label for="berlin">Berlin</label>
    <input type="radio" id="rome" name="q1">
    <label for="rome">Rome</label>
  </div>
  <div class="question">
    <p>What is the largest planet in our solar system?</p>
    <input type="radio" id="earth" name="q2">
    <label for="earth">Earth</label>
    <input type="radio" id="saturn" name="q2">
    <label for="saturn">Saturn</label>
    <input type="radio" id="jupiter" name="q2">
    <label for="jupiter">Jupiter</label>
  </div>
  <div class="question">
    <p>What is the smallest country in the world?</p>
    <input type="radio" id="vatican" name="q3">
    <label for="vatican">Vatican City</label>
    <input type="radio" id="monaco" name="q3">
    <label for="monaco">Monaco</label>
    <input type="radio" id="nauru" name="q3">
    <label for="nauru">Nauru</label>
  </div>
  <button onclick="checkAnswers()">Submit</button>
  <p id="result"></p>
</div>
<script>
  function showQuiz() {
  document.getElementById("quiz").style.display = "block";
}

</script>

Multiple Choice Quiz App Using JavaScript

You may like these posts :

Write Your Comment