QUIZ WITHOUT JAVASCRIPT

Thursday, 4 August 2022

QUIZ WITHOUT JAVASCRIPT

---------------------------------------------------------------------------------------------------------

https://stackoverflow.com/questions/6019845/show-hide-div-on-click-with-css

http://fbgadgets.blogspot.com/2022/07/drag-and-drop-english-to-urdu-matching.html

---------------------------------------------------------------------------------------------------------

<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:
https://stackoverflow.com/questions/6019845/show-hide-div-on-click-with-css

-----------------------------------------------------------------------------------
<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>
------------------------------------------------------------------------------------