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>------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment