quiz challenge

In this example below you will see how to do a quiz challenge with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by digitalbart, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright digitalbart ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>quiz challenge</title>
  
  
  
  
  
</head>

<body>

  
  <h1>Newton's Laws of Motion</h1>
  <ul>
    <li>An object in motion tends to stay in motion, unless acted on by an outside force.</li>
    <li>Acceleration is dependent on the forces acting upon an object and the mass of the object.</li>
    <li>For every action, there is an equal and opposite reaction.</li>
  </ul>
  <input type="text" id="boldIndex">
  <button id="embolden">Embolden</button>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/digitalbart/quiz-challenge-PQEeyG */
const laws = document.getElementsByTagName('li');
const indexText = document.getElementById('boldIndex');
const button = document.getElementById('embolden');

button.addEventListener('click', (e) => {
    const index = parseInt(indexText.value, 10);
  
    for (let i = 0; i < laws.length; i += 1) {
       let law = laws[i];
      
        // match these
        console.log(i);
        console.log(index);
  
       // replace 'false' with a correct test condition on the line below
       if (i===index) {
           console.log('match found');
           law.style.fontWeight = 'bold';
       } else {
           law.style.fontWeight = 'normal';
       }
    }
});

Comments