I want to make my JavaScript code optimize using arrays and loop (for loop)
10:23 06 Aug 2021

I have coded a quiz page but I have to manually write the code for each question in JavaScript. I want to make it automate using array and loops(for loop) where the questions and answers will be stored in array. I have included the detailed screen shots of what I want to do. I am facing this issue because I am not familiar with array and loops in JavaScript. please help.

function reset(){
    window.location = "http://127.0.0.1:5500/index.html"
   
}

function showanswers(){
    window.location = "http://127.0.0.1:5500/answers.html"
    
    
}


function check1()
{

    var e = document.getElementById('check-btn');
    e.style.display = ((e.style.display!='block') ? 'none' : 'none');

    var e = document.getElementById('reset-btn');
    e.style.display = ((e.style.display!='block') ? 'block' : 'block');



//solution 1-------------------------------------------------------------    
var a=document.getElementById("solution1_1");
if((a.value=="carefully") || (a.value=="Carefully") || (a.value=="CAREFULLY"))
{
    var element = document.getElementById("solution1_1");
    element.classList.toggle("ex_textfield-right");

    var element = document.getElementById("counter_1");
    element.classList.toggle("counter-right");
}
else
{
    var element = document.getElementById("counter_1");
    element.classList.toggle("counter-wrong");

    var element = document.getElementById("solution1_1");
    element.classList.toggle("ex_textfield-wrong");

    var e = document.getElementById('check-ans-1');
    e.style.display = ((e.style.display!='block') ? 'block' : 'none');
}

//solution 2-------------------------------------------------------------    
var a=document.getElementById("solution1_2");
if((a.value=="careful") || (a.value=="Careful") || (a.value=="CAREFUL") )
{
    var element = document.getElementById("solution1_2");
    element.classList.toggle("ex_textfield-right");

    var element = document.getElementById("counter_2");
    element.classList.toggle("counter-right");
   
}
else
{
    var element = document.getElementById("solution1_2");
    element.classList.toggle("ex_textfield-wrong");

    var e = document.getElementById('check-ans-2');
    e.style.display = ((e.style.display!='block') ? 'block' : 'none');

    var element = document.getElementById("counter_2");
    element.classList.toggle("counter-wrong");
}


//solution 3-------------------------------------------------------------    
var a=document.getElementById("solution1_3");
if((a.value=="quickly") || (a.value=="Quickly") || (a.value=="QUICKLY"))
{
    var element = document.getElementById("solution1_3");
    element.classList.toggle("ex_textfield-right");

    var element = document.getElementById("counter_3");
    element.classList.toggle("counter-right");
   
}
else
{
    var element = document.getElementById("solution1_3");
    element.classList.toggle("ex_textfield-wrong");

    var e = document.getElementById('check-ans-3');
    e.style.display = ((e.style.display!='block') ? 'block' : 'none');

    var element = document.getElementById("counter_3");
    element.classList.toggle("counter-wrong");
}


//solution 4-------------------------------------------------------------    
var a=document.getElementById("solution1_4");
if((a.value=="quick") || (a.value=="Quick") || (a.value=="QUICK"))
{
    var element = document.getElementById("solution1_4");
    element.classList.toggle("ex_textfield-right");

    var element = document.getElementById("counter_4");
    element.classList.toggle("counter-right");
   
}
else
{
    var element = document.getElementById("solution1_4");
    element.classList.toggle("ex_textfield-wrong");

    var e = document.getElementById('check-ans-4');
    e.style.display = ((e.style.display!='block') ? 'block' : 'none');

    var element = document.getElementById("counter_4");
    element.classList.toggle("counter-wrong");
}


//solution 5-------------------------------------------------------------    
var a=document.getElementById("solution1_5");
if((a.value=="tired") || (a.value=="Tired") ||(a.value=="TIRED"))
{
    var element = document.getElementById("solution1_5");
    element.classList.toggle("ex_textfield-right");

    var element = document.getElementById("counter_5");
    element.classList.toggle("counter-right");
   
}
else
{
    var element = document.getElementById("solution1_5");
    element.classList.toggle("ex_textfield-wrong");

    var e = document.getElementById('check-ans-5');
    e.style.display = ((e.style.display!='block') ? 'block' : 'none');

    var element = document.getElementById("counter_5");
    element.classList.toggle("counter-wrong");
}


}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ol {
  margin-left: 50px;
  padding-top: 10px;
  list-style: none;
}

.heading {
  font-family: "Montserrat", sans-serif;
  padding: 20px 20px 20px 20px;
}

h3 {
  font-family: "Montserrat", sans-serif;
  padding: 0px 20px 0px 20px;
}

.link {
  padding: 20px 0px 20px 0px;
  font-family: "Montserrat", sans-serif;
}

.counter {
  background: #d1d1d1;
  border-radius: 50%;
  padding: 5px 10px 5px 10px;
}

.counter-wrong {
  background: #ce2929;
  border-radius: 50%;
  padding: 5px 10px 5px 10px;
}

.counter-right {
  background: #3bc442;
  border-radius: 50%;
  padding: 5px 10px 5px 10px;
}

.ex_textfield {
  margin-left: .25em;
  margin-right: .25em;
  border: 1px solid #999;
  font-size: 16px;
  border-radius: 4px;
  display: inline-block;
  height: 2em;
  line-height: 2em;
  outline: 0;
  padding: 1px .5em;
  vertical-align: middle;
}

.ex_textfield-wrong {
  margin-left: .25em;
  margin-right: .25em;
  border: 1px solid #ce2929;
  border-radius: 4px;
  display: inline-block;
  font-size: 16px;
  height: 2em;
  line-height: 2em;
  outline: 0;
  padding: 1px .5em;
  vertical-align: middle;
}

.ex_textfield-right {
  margin-left: .25em;
  margin-right: .25em;
  border: none;
  color: #3bc442;
  font-weight: bolder;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  border-radius: 4px;
  display: inline-block;
  height: 2em;
  line-height: 2em;
  outline: 0;
  padding: 1px .5em;
  vertical-align: middle;
}

.btn-container {
  width: 35%;
  padding-left: 30px;
  padding-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.check-btn {
  width: 30vh;
  padding: 10px 0px 10px 0px;
  cursor: pointer;
  border: none;
  background-color: #e05252;
  color: white;
  border-radius: 5px;
}

.reset-btn {
  width: 30vh;
  padding: 10px 0px 10px 0px;
  cursor: pointer;
  z-index: 2;
  border: none;
  background-color: #e05252;
  color: white;
  border-radius: 5px;
  display: none;
}

.check-btn:hover {
  width: 30vh;
  padding: 10px 0px 10px 0px;
  border: none;
  background-color: #963636;
  color: white;
  border-radius: 5px;
}

.correct-input {
  color: #3bc442;
  font-weight: 700;
}

.show-btn {
  width: 30vh;
  padding: 10px 0px 10px 0px;
  cursor: pointer;
  border: none;
  background-color: #e05252;
  color: white;
  border-radius: 5px;
}

.show-btn:hover {
  width: 30vh;
  padding: 10px 0px 10px 0px;
  border: none;
  background-color: #963636;
  color: white;
  border-radius: 5px;
}

.check-ans {
  padding-left: 30px;
  display: none;
}
/*# sourceMappingURL=style.css.map */


    

        
ADVERBS AND ADJECTIVES EXERCIES:

        
Exercise 1: Adverbs or Adjectives

        
Choose the correct form (adjective or adverb).

    


    

        
    
            
  1. 
                1
                I held the baby
                
                (careful / carefully)
    
                
    Correct answer is : carefully
    
            
    2. 

            
  2. 
                2
                Saksham is a
                
                person. (careful / carefully)
                
    Correct answer is : careful
    
            
    3. 

            
  3. 
                3
                Arjun ran
                
                to the hospital. (quick / quickly)
                
    Correct answer is : quickly
    
            
    4. 

            
  4. 
                4
                Rohan was
                
                (quick / quickly)
                
    Correct answer is : quick
    
            
    5. 

            
  5. 
                5
                David looked
                
                (tired / tiredly)
                
    Correct answer is : tired
    
            
    6.

The below link contain all the images of code and issue I am facing. Please do refer.

https://drive.google.com/drive/folders/1G2yyeOlSsPAHsvmCa3Zyg5hYG_Gq1NfL?usp=sharing

javascript html css arrays