Thursday, 4 August 2022

QUIZ WITHOUT JAVASCRIPT

                                     

---------------------------------------------------------------------------------------------------------
Read More:
---------------------------------------------------------------------------------------------------------
<html>
<!-- https://stackoverflow.com/questions/27825788/simple-javascript-quiz-with-radio-buttons-and-multiple-correct-answers/27825882 -->
<head>
<style>
.correct{max-width:100px;opacity:0}
input:checked.right ~div.correct{position:relative;background-color:yellow;top:-20px;left:70px;opacity:1;}
</style>
</head>
<body>
<div >
Which country is commonly called the U.S.A ?<br>
England<input type="radio" name="one" value="UK" /><br>
America<input type="radio" name="one" value="US" class="right"/><br>
<div class="correct">Correct</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------
Read More:
-----------------------------------------------------------------------------------
<style>
.hiddendiv{display:none;position:relative;top:-20px;left:70px;width:60px; margin:0px;}
.testA:focus ~ #testA {display:inline-block;background-color:Red;position:relative;}
.testB:focus ~ #testB {display:inline-block;background-color:Green;position:relative;}
</style>
<ul>
<li  tabindex="1" class="testA">Test A</li>
<div id="testA"   class="hiddendiv">Wrong</div> 
<li  tabindex="2" class="testB">Test B</li>
<div id="testB"   class="hiddendiv">Correct</div>
</ul>
-----------------------------------------------------------------------------------
QUIZ WITH HTML AND JAVASCRIPT
-----------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
  <title>Matching Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    .card {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 10px;
      border: 1px solid black;
      font-size: 24px;
      cursor: pointer;
    }
    .matched {
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <h1>Matching Game: Click the matching letters and words</h1>
  <div class="card" id="A">A</div>
  <div class="card" id="B">B</div>
  <div class="card" id="C">C</div>
  <div class="card" id="D">D</div>
  <div class="card" id="apple">apple</div>
  <div class="card" id="ball">ball</div>
  <div class="card" id="cat">cat</div>
  <div class="card" id="dog">dog</div>

  <script>
    let clicked = 0;
    let firstCard, secondCard;

    const cards = document.querySelectorAll('.card');
    cards.forEach(card => card.addEventListener('click', flipCard));

    function flipCard() {
      if (clicked === 0) {
        firstCard = this;
      } else {
        secondCard = this;
        checkMatch();
      }
      this.classList.add('matched');
      clicked = (clicked + 1) % 2;
    }

    function checkMatch() {
      if (firstCard.id === 'A' && secondCard.id === 'apple' ||
          firstCard.id === 'B' && secondCard.id === 'ball' ||
          firstCard.id === 'C' && secondCard.id === 'cat' ||
          firstCard.id === 'D' && secondCard.id === 'dog') {
        alert('Matched!');
      } else {
        alert('Try again!');
        firstCard.classList.remove('matched');
        secondCard.classList.remove('matched');
      }
    }
  </script>
</body>
</html>
------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Radio Button Quiz – Show Explanation Only on Correct</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 680px;
      margin: 40px auto;
      padding: 0 20px;
      line-height: 1.6;
      background: #fafafa;
    }
    h1 { text-align: center; color: #222; }
    .question {
      background: white;
      padding: 24px;
      margin-bottom: 32px;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }
    .question h3 {
      margin-top: 0;
      color: #1a1a1a;
    }
    .options label {
      display: block;
      margin: 14px 0;
      padding: 14px 16px;
      border-radius: 10px;
      background: #f8f9fa;
      cursor: pointer;
      transition: all 0.18s;
      user-select: none;
    }
    .options label:hover {
      background: #e9ecef;
    }
    input[type="radio"] {
      margin-right: 12px;
    }
    .feedback {
      margin-top: 20px;
      padding: 16px 20px;
      border-radius: 10px;
      font-weight: 500;
      min-height: 60px;
      display: none;
    }
    .correct {
      background: #e6f4ea;
      border: 1px solid #b3d6b8;
      color: #0f5132;
    }
    .wrong {
      background: #fde8e8;
      border: 1px solid #f5c2c7;
      color: #842029;
    }
    .controls {
      text-align: center;
      margin: 40px 0 60px;
    }
    button {
      padding: 14px 32px;
      font-size: 1.1rem;
      font-weight: 600;
      color: white;
      background: #0066cc;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.2s;
    }
    button:hover {
      background: #0055aa;
    }
    button:active {
      background: #004488;
    }
  </style>
</head>
<body>

<h1>Quick Quiz</h1>

<!-- Question 1 -->
<div class="question">
  <h3>1. What does HTML stand for?</h3>
  <div class="options">
    <label><input type="radio" name="q1" value="a"> Hyper Text Makeup Language</label>
    <label><input type="radio" name="q1" value="b" data-correct="true"
                  data-explanation="HTML = HyperText Markup Language — the standard markup language for creating web pages."> HyperText Markup Language</label>
    <label><input type="radio" name="q1" value="c"> High Tech Machine Learning</label>
    <label><input type="radio" name="q1" value="d"> Home Tool Management Language</label>
  </div>
  <div class="feedback"></div>
</div>

<!-- Question 2 -->
<div class="question">
  <h3>2. Which planet is known as the Red Planet?</h3>
  <div class="options">
    <label><input type="radio" name="q2" value="a"> Venus</label>
    <label><input type="radio" name="q2" value="b"> Jupiter</label>
    <label><input type="radio" name="q2" value="c" data-correct="true"
                  data-explanation="Mars is called the Red Planet because of iron oxide (rust) on its surface."> Mars</label>
    <label><input type="radio" name="q2" value="d"> Saturn</label>
  </div>
  <div class="feedback"></div>
</div>

<!-- Question 3 -->
<div class="question">
  <h3>3. What is the chemical symbol for gold?</h3>
  <div class="options">
    <label><input type="radio" name="q3" value="a"> Gd</label>
    <label><input type="radio" name="q3" value="b" data-correct="true"
                  data-explanation="Au comes from the Latin word 'aurum' meaning gold."> Au</label>
    <label><input type="radio" name="q3" value="c"> Ag</label>
    <label><input type="radio" name="q3" value="d"> Go</label>
  </div>
  <div class="feedback"></div>
</div>

<!-- Question 4 -->
<div class="question">
  <h3>4. Which of these is NOT a JavaScript data type?</h3>
  <div class="options">
    <label><input type="radio" name="q4" value="a"> String</label>
    <label><input type="radio" name="q4" value="b"> Boolean</label>
    <label><input type="radio" name="q4" value="c" data-correct="true"
                  data-explanation="JavaScript has String, Number, Boolean, Object, undefined, null, Symbol, BigInt — but no integer type (Number covers both integers and floats)."> Integer</label>
    <label><input type="radio" name="q4" value="d"> Object</label>
  </div>
  <div class="feedback"></div>
</div>

<div class="controls">
  <button id="restartBtn">Restart Quiz</button>
</div>

<script>
// Quiz logic
document.querySelectorAll('.question').forEach((q) => {
  const radios = q.querySelectorAll('input[type="radio"]');
  const feedback = q.querySelector('.feedback');

  radios.forEach(radio => {
    radio.addEventListener('change', function () {
      feedback.style.display = 'none';
      feedback.className = 'feedback';

      const correctRadio = q.querySelector('input[data-correct="true"]');

      if (this === correctRadio) {
        const explanation = this.dataset.explanation || "Correct!";
        feedback.textContent = "✓ Correct! " + explanation;
        feedback.className = 'feedback correct';
        feedback.style.display = 'block';
      } else if (this.checked) {
        feedback.textContent = "✗ Incorrect";
        feedback.className = 'feedback wrong';
        feedback.style.display = 'block';
      }
    });
  });
});

// Restart button
document.getElementById('restartBtn').addEventListener('click', () => {
  // Uncheck all radios
  document.querySelectorAll('input[type="radio"]').forEach(radio => {
    radio.checked = false;
  });

  // Hide all feedback
  document.querySelectorAll('.feedback').forEach(fb => {
    fb.style.display = 'none';
    fb.className = 'feedback';
  });

  // Scroll to top smoothly
  window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>

</body>
</html>
------------------------------------

Posted by on Thursday, 4 August 2022 at 13:50
Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets