CODEWITHSUNDEEP
javascripthtmlcssmultiple-columnsonload
user9638832
user9638832

Reputation:

How to put multiple elements in columns

I'm making a map of the United States where when you click on a state, you have to answer the state capital. I am using 3 columns to keep track of the answers. One column is correct answers, the second is incorrect, and the third is states unanswered. I have it set up so far that when an answer is correct it can go into the first column, and same with the second column. Unfortunately, I don't know how to make all of the state names start in the third "unanswered column". Here is my code so far:

var alts = "";

function loadMap() {
    var map = document.getElementById("statemap");
    map.addEventListener("click", function(evt) {
        var alt = evt.target.alt;
        alts = alt;
        var id = evt.target.id;
        ids = id;
        document.getElementById('divIdMessage').innerHTML = "What is the capital of " + evt.target.id + "?";
    });
}

function shows() {
    document.getElementById("divIdMessage").innerHTML = "Click on a state to get started."

}

function show() {
    document.getElementById("text").value = "";
    document.getElementById('divIdAnswer').innerHTML = "";
}

function checkAnswer() {
    if (!alts) {
        document.getElementById("divIdAnswer").innerHTML = "Must click on a state first.";
        return;
    }
    var submittedAnswer = document.getElementById('text').value;
    var correctAnswer = alts;
    if (submittedAnswer == correctAnswer) {
        document.getElementById('divIdAnswer').innerHTML = "Good job, that is correct!";
        document.getElementById('divCorrect').innerHTML += ids + "<br>";
    } else if (submittedAnswer != correctAnswer) {
        document.getElementById('divIdAnswer').innerHTML = "I'm sorry, that is incorrect. The correct answer is: " + alts + ".";
        document.getElementById('divIncorrect').innerHTML += ids + "<br>"
    }
	
    alts = "";
   
}
.column {
    float: left;
    position: relative;
    width: 300px;
	height: 200px;
    border: 0px;
    box-sizing: border-box;
}
  
body {
    padding: 10 px;
    text-align: center;
    background_color: #GF5D89
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}  	
<body onload="loadMap(); shows()">
    <h1>Do you know the capitals of each of the United States of America?</h1>
    <h2>Use this map to test your knowledge.</h2>
    <img src="http://www.conceptdraw.com/How-To-Guide/picture/Geo-Map--USA.png" width="819" height="492" alt="States" usemap="#statemap">

    <map id="statemap" name="statemap">
        <area shape="rect" coords="30,80,120,130" id="Oregon" alt="Salem" onClick="show()"/>
        <area shape="rect" coords="60,70,130,20" id="Washington" alt="Olympia" onClick="show()" />
        <area shape="rect" coords="80,170,130,220" id="Nevada" alt="Carson City" onClick="show()" />
        <area shape="rect" coords="125,110,185,150" id="Boise" alt="Idaho" onClick="show()" />
        <area shape="rect" coords="180,50,260,100" id="Montana" alt="Helena" onClick="show()"/>
        <area shape="rect" coords="200,125,280,185" id="Wyoming" alt="Cheyenne" onClick="show()" />
        <area shape="rect" coords="50,380,130,430" id="Alaska" alt="Juno" onClick="show()" />
        <area shape="rect" coords="140,180,210,250" id="Utah" alt="U" onClick="show()" />
        <area shape="rect" coords="130,260,190,330" id="Arizona" alt="A" onClick="show()" />
        <area shape="rect" coords="215,195,300,255" id="Colorado" alt="Colorado" onClick="show()" />
        <area shape="rect" coords="205,260,280,350" id="New Mexico" alt="New Mexico" onClick="show()" />
        <area shape="rect" coords="330,270,410,320" id="Oklahoma" alt="Oklahoma" onClick="show()" />
        <area shape="rect" coords="420,275,470,340" id="Arkansas" alt="Arkansas" onClick="show()" />
        <area shape="rect" coords="310,220,410,270" id="Kansas" alt="Kansas" onClick="show()" />
        <area shape="rect" coords="410,230,470,275" id="Missouri" alt="Missouri" onClick="show()" />
        <area shape="rect" coords="310,170,390,220" id="Nebraska" alt="Nebraska" onClick="show()" />
        <area shape="rect" coords="290,110,380,160" id="South Dakota" alt="South Dakota" onClick="show()" />
        <area shape="rect" coords="390,150,450,200" id="Iowa" alt="Iowa" onClick="show()" />
        <area shape="rect" coords="290,50,380,100" id="North Dakota" alt="North Dakota" onClick="show()" />
        <area shape="rect" coords="380,60,440,150" id="Minnesota" alt="Minnesota" onClick="show()" />
        <area shape="rect" coords="280,320,390,430" id="Texas" alt="Texas" onClick="show()" />
        <area shape="rect" coords="420,370,490,400" id="Louisiana" alt="Louisiana" onClick="show()" />
        <area shape="rect" coords="195,410,280,490" id="Hawaii" alt="Hawaii" onClick="show()" />
        <area shape="rect" coords="20,210,90,250" id="California" alt="California" onClick="show()" />
    </map>
    <div id="divIdMessage"></div>
    <br>
    <textarea id="text" style="text-align:center; margin: 0 auto">Type answer here</textarea>
    <br>
    <br>
    <input type="button" id="myBtn" value="Check Answer" style="text-align:center; margin: 0 auto" onClick="checkAnswer()">
    <br>
    <br>
    <div id="divIdAnswer"></div>
    <br>
    <div class="row">
        <div class="column" style="background-color:#aaa;">
          <h3>Correct Answers</h3>
          <p id="divCorrect"></p>
        </div>
        <div class="column" style="background-color:#bbb">
          <h3>Incorrect Answers</h3>
          <p id="divIncorrect"></p>
        </div>
        <div class="column" style="background-color:#ccc;">
          <h3>No Answers</h3>
          <p id="divNone"></p>
        </div>
        <br>
    </div>
</body>

Upvotes: 1

Views: 262

Answers (3)

Bjonnfesk
Bjonnfesk

Reputation: 308

You can use a for-loop to iterate through #statesmap's children:

var unansColumn = document.getElementById("divNone");
var states = document.getElementById("statemap").children;
var stateName;
var tmpStateDiv;
for (var i = 0; i < states.length; i++) {
    state = states[i];
    stateName = state.getAttribute('id');
    tmpStateDiv = document.createElement('DIV');
    tmpStateDiv.setAttribute('id', 'unanswered' + stateName);
    tmpStateDiv.appendChild(document.createTextNode(stateName));
    unansColumn.appendChild(tmpStateDiv); 
}

An advantage of this approach is that it doesn't just work for the US; if you changed the map to a map of Canada, and updated your #statesmap div to list the Canadian states instead, it should work just fine with no modifications.

var alts = "";

function resetColumns() {
  var state;
  var stateName;
  var tmpStateDiv;
  var states = document.getElementById('statemap').children;
  var corColumn = document.getElementById('divCorrect');
  var incorColumn = document.getElementById('divIncorrect');
  var unansColumn = document.getElementById('divNone');
  corColumn.innerHTML = '';
  incorColumn.innerHTML = '';
  for (var i = 0; i < states.length; i++) {
    state = states[i];
    stateName = state.getAttribute('id');
    //unansColumn.innerHTML += "<div id= \"" + state.getAttribute('id') + "\">" + state.getAttribute('id') + "</div>"; <-- bad code, bad bjonnfesk
    /*----------------------*/
    //instead, do: 
    tmpStateDiv = document.createElement('DIV'); //create a new element of type div, into which we will put the name of the state we are processing...
    tmpStateDiv.setAttribute('id', 'unanswered' + stateName); //set its id to 'unanswered' + name of the state, for instance 'unansweredOregon' (to avoid an id conflict). It needs to have an id so that we can remove it later, when the state is answered.
    tmpStateDiv.appendChild(document.createTextNode(stateName)); //write the name of the state to the element
    unansColumn.appendChild(tmpStateDiv); //finally, add the entire div element to the list of unanswered states
  }
}

function removeFromUnanswered(id) {
  var unansweredStates = document.getElementById('divNone');
  //unansweredStates.removeChild(unansweredStates.querySelector('#' + id)); <--here a modification is also necessary:
  unansweredStates.removeChild(unansweredStates.querySelector('#unanswered' + id)); //otherwise, since we changed the ids of the states in the unanswered column, our querySelector would not match the state when it is time for it to be removed.
}

function loadMap() {
  var map = document.getElementById("statemap");
  map.addEventListener("click", function(evt) {
    var alt = evt.target.alt;
    alts = alt;
    var id = evt.target.id;
    ids = id;
    document.getElementById("divIdMessage").innerHTML = "What is the capital of " + evt.target.id + "?";
  });
}


function shows() {
  document.getElementById("divIdMessage").innerHTML = "Click on a state to get started.";

}

function show() {
  document.getElementById("text").value = "";
  document.getElementById("divIdAnswer").innerHTML = "";
}


function checkAnswer() {
  if (!alts) {
    document.getElementById("divIdAnswer").innerHTML = "Must click on a state first.";
    return;
  }
  var submittedAnswer = document.getElementById("text").value;
  var correctAnswer = alts;
  if (submittedAnswer == correctAnswer) {
    document.getElementById("divIdAnswer").innerHTML = "Good job, that is correct!";
    document.getElementById("divCorrect").innerHTML += ids + "<br>";
  } else if (submittedAnswer != correctAnswer) {
    document.getElementById("divIdAnswer").innerHTML = "I'm sorry, that is incorrect. The correct answer is: " + alts + ".";
    document.getElementById("divIncorrect").innerHTML += ids + "<br>";
  }

  alts = "";
  removeFromUnanswered(ids);
}
.column {
  float: left;
  position: relative;
  width: 300px;
  height: 200px;
  border: 0px;
  box-sizing: border-box;
}

body {
  padding: 10 px;
  text-align: center;
  background-color: #FF5D89;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body onload="setTimeout(function() {
    loadMap();
    shows();   
    resetColumns();
  }, 1000);">
  <h1>Do you know the capitals of each of the United States of America?</h1>
  <h2>Use this map to test your knowledge.</h2>
  <img src="http://www.conceptdraw.com/How-To-Guide/picture/Geo-Map--USA.png" width="819" height="492" alt="States" usemap="#statemap">

  <map id="statemap" name="statemap">
      <area shape="rect" coords="30,80,120,130" id="Oregon" alt="Salem" onClick="show()"/>
      <area shape="rect" coords="60,70,130,20" id="Washington" alt="Olympia" onClick="show()" />
      <area shape="rect" coords="80,170,130,220" id="Nevada" alt="Carson City" onClick="show()" />
      <area shape="rect" coords="125,110,185,150" id="Boise" alt="Idaho" onClick="show()" />
      <area shape="rect" coords="180,50,260,100" id="Montana" alt="Helena" onClick="show()"/>
      <area shape="rect" coords="200,125,280,185" id="Wyoming" alt="Cheyenne" onClick="show()" />
      <area shape="rect" coords="50,380,130,430" id="Alaska" alt="Juno" onClick="show()" />
      <area shape="rect" coords="140,180,210,250" id="Utah" alt="U" onClick="show()" />
      <area shape="rect" coords="130,260,190,330" id="Arizona" alt="A" onClick="show()" />
      <area shape="rect" coords="215,195,300,255" id="Colorado" alt="Colorado" onClick="show()" />
      <area shape="rect" coords="205,260,280,350" id="New Mexico" alt="New Mexico" onClick="show()" />
      <area shape="rect" coords="330,270,410,320" id="Oklahoma" alt="Oklahoma" onClick="show()" />
      <area shape="rect" coords="420,275,470,340" id="Arkansas" alt="Arkansas" onClick="show()" />
      <area shape="rect" coords="310,220,410,270" id="Kansas" alt="Kansas" onClick="show()" />
      <area shape="rect" coords="410,230,470,275" id="Missouri" alt="Missouri" onClick="show()" />
      <area shape="rect" coords="310,170,390,220" id="Nebraska" alt="Nebraska" onClick="show()" />
      <area shape="rect" coords="290,110,380,160" id="South Dakota" alt="South Dakota" onClick="show()" />
      <area shape="rect" coords="390,150,450,200" id="Iowa" alt="Iowa" onClick="show()" />
      <area shape="rect" coords="290,50,380,100" id="North Dakota" alt="North Dakota" onClick="show()" />
      <area shape="rect" coords="380,60,440,150" id="Minnesota" alt="Minnesota" onClick="show()" />
      <area shape="rect" coords="280,320,390,430" id="Texas" alt="Texas" onClick="show()" />
      <area shape="rect" coords="420,370,490,400" id="Louisiana" alt="Louisiana" onClick="show()" />
      <area shape="rect" coords="195,410,280,490" id="Hawaii" alt="Hawaii" onClick="show()" />
      <area shape="rect" coords="20,210,90,250" id="California" alt="California" onClick="show()" />
    </map>
  <div id="divIdMessage">&nbsp;</div>
  <br>
  <textarea id="text" style="text-align:center; margin: 0 auto">Type answer here</textarea>
  <br>
  <br>
  <input type="button" id="myBtn" value="Check Answer" style="text-align:center; margin: 0 auto" onClick="checkAnswer()">
  <br>
  <br>
  <div id="divIdAnswer"></div>
  <br>
  <div class="row">
    <div class="column" style="background-color:#aaa;">
      <h3>Correct Answers</h3>
      <p id="divCorrect"></p>
    </div>
    <div class="column" style="background-color:#bbb">
      <h3>Incorrect Answers</h3>
      <p id="divIncorrect"></p>
    </div>
    <div class="column" style="background-color:#ccc;">
      <h3>No Answers</h3>
      <p id="divNone"></p>
    </div>
    <br>
  </div>
</body>

</html>

I also took the liberty of correcting some other problems in your code, which has, among other things, caused your background-color property (misspelled as background_color) to take effect.

Edit 1: I assume you also wish to have the answered states removed from the unanswered column upon being answered. Add this function to your script, for instance just above loadMap(): 

function removeFromUnanswered(id) {
  var unansweredStates = document.getElementById("divNone");
  unansweredStates.removeChild(unansweredStates.querySelector("#unanswered" + id));
}

...and then call that function after checking the answer in checkAnswer:

function checkAnswer() {
  ...
  alts = "";
  removeFromUnanswered(ids);
}

Edit 2: Replaced bad code and improved formatting. The new code is explained by comments and is much more readable than the old code.

Upvotes: 1

tot11
tot11

Reputation: 49

Start by printing out the names of all the states. Do that by creating an array by iterating your DOM. Print that array. When the user submits an answer, delete that answer from your array then re-print the array.

> 
> var alts = "";
> 
> function loadMap() {
>     var map = document.getElementById("statemap");
>     map.addEventListener("click", function(evt) {
>         var alt = evt.target.alt;
>         alts = alt;
>         var id = evt.target.id;
>         ids = id;
>         document.getElementById('divIdMessage').innerHTML = "What is the capital of " + evt.target.id + "?";
>     }); } var arrayUnansw=[]; function createArray(){
>     var query = document.getElementsByTagName("area");
>     for(var i=0;i<query.length;i++){
>       arrayUnansw.push(query[i].getAttribute("id"));
>     } } function printArray(){   var container = document.getElementById("divNone");   for(var
> i=0;i<arrayUnansw.length;i++){
>     container.innerHTML+=arrayUnansw[i]+"<br>";   } } createArray(); printArray(); function shows() {
>     document.getElementById("divIdMessage").innerHTML = "Click on a state to get started."
> 
> }
> 
> function show() {
>     document.getElementById("text").value = "";
>     document.getElementById('divIdAnswer').innerHTML = ""; }
> 
> 
> function checkAnswer() {
>     if (!alts) {
>         document.getElementById("divIdAnswer").innerHTML = "Must click on a state first.";
>         return;
>     }
>     var submittedAnswer = document.getElementById('text').value;
>     var correctAnswer = alts;
>     if (submittedAnswer == correctAnswer) {
>         document.getElementById('divIdAnswer').innerHTML = "Good job, that is correct!";
>         document.getElementById('divCorrect').innerHTML += ids + "<br>";
> 
>     } else if (submittedAnswer != correctAnswer) {
>         document.getElementById('divIdAnswer').innerHTML = "I'm sorry, that is incorrect. The correct answer is: " + alts + ".";
>         document.getElementById('divIncorrect').innerHTML += ids + "<br>"
>     }
>     var index = arrayUnansw.indexOf(ids);
>     console.log(index);
>     if(index!==-1)arrayUnansw.splice(index,1);
>     document.getElementById("divNone").innerHTML="";
>     printArray();
>     alts = "";
> 
> } 
> 
>     <style>
>     .column {
>         float: left;
>         position: relative;
>         width: 300px;
>     	height: 200px;
>         border: 0px;
>         box-sizing: border-box;
>     }
> 
>     body {
>         padding: 10 px;
>         text-align: center;
>         background_color: #GF5D89
>         font-family: "Trebuchet MS", Helvetica, sans-serif;
>     }
>     }
>     </style>
> 
> 
> 
>     <body onload="loadMap(); shows()">
>         <h1>Do you know the capitals of each of the United States of America?</h1>
>         <h2>Use this map to test your knowledge.</h2>
>         <img src="http://www.conceptdraw.com/How-To-Guide/picture/Geo-Map--USA.png"
> width="819" height="492" alt="States" usemap="#statemap">
> 
>         <map id="statemap" name="statemap">
>             <area shape="rect" coords="30,80,120,130" id="Oregon" alt="Salem" onClick="show()"/>
>             <area shape="rect" coords="60,70,130,20" id="Washington" alt="Olympia" onClick="show()" />
>             <area shape="rect" coords="80,170,130,220" id="Nevada" alt="Carson City" onClick="show()" />
>             <area shape="rect" coords="125,110,185,150" id="Boise" alt="Idaho" onClick="show()" />
>             <area shape="rect" coords="180,50,260,100" id="Montana" alt="Helena" onClick="show()"/>
>             <area shape="rect" coords="200,125,280,185" id="Wyoming" alt="Cheyenne" onClick="show()" />
>             <area shape="rect" coords="50,380,130,430" id="Alaska" alt="Juno" onClick="show()" />
>             <area shape="rect" coords="140,180,210,250" id="Utah" alt="U" onClick="show()" />
>             <area shape="rect" coords="130,260,190,330" id="Arizona" alt="A" onClick="show()" />
>             <area shape="rect" coords="215,195,300,255" id="Colorado" alt="Colorado" onClick="show()" />
>             <area shape="rect" coords="205,260,280,350" id="New Mexico" alt="New Mexico" onClick="show()" />
>             <area shape="rect" coords="330,270,410,320" id="Oklahoma" alt="Oklahoma" onClick="show()" />
>             <area shape="rect" coords="420,275,470,340" id="Arkansas" alt="Arkansas" onClick="show()" />
>             <area shape="rect" coords="310,220,410,270" id="Kansas" alt="Kansas" onClick="show()" />
>             <area shape="rect" coords="410,230,470,275" id="Missouri" alt="Missouri" onClick="show()" />
>             <area shape="rect" coords="310,170,390,220" id="Nebraska" alt="Nebraska" onClick="show()" />
>             <area shape="rect" coords="290,110,380,160" id="South Dakota" alt="South Dakota" onClick="show()" />
>             <area shape="rect" coords="390,150,450,200" id="Iowa" alt="Iowa" onClick="show()" />
>             <area shape="rect" coords="290,50,380,100" id="North Dakota" alt="North Dakota" onClick="show()" />
>             <area shape="rect" coords="380,60,440,150" id="Minnesota" alt="Minnesota" onClick="show()" />
>             <area shape="rect" coords="280,320,390,430" id="Texas" alt="Texas" onClick="show()" />
>             <area shape="rect" coords="420,370,490,400" id="Louisiana" alt="Louisiana" onClick="show()" />
>             <area shape="rect" coords="195,410,280,490" id="Hawaii" alt="Hawaii" onClick="show()" />
>             <area shape="rect" coords="20,210,90,250" id="California" alt="California" onClick="show()" />
>         </map>
>     		<div id="divIdMessage"></div>
>     		<br>
>     		<textarea id="text" style="text-align:center; margin: 0 auto">Type answer here</textarea>
>     		<br>
>     		<br>
>     		<input type="button" id="myBtn" value="Check Answer" style="text-align:center; margin: 0 auto" onClick="checkAnswer()">
>     		<br>
>     		<br>
>     		<div id="divIdAnswer"></div>
>     		<br>
>     		<div class="row">
>       <div class="column" style="background-color:#aaa;">
>         <h3>Correct Answers</h3>
>         <p id="divCorrect"></p>
>       </div>
>       <div class="column" style="background-color:#bbb">
>         <h3>Incorrect Answers</h3>
>         <p id="divIncorrect"></p>
>       </div>
>       <div class="column" style="background-color:#ccc;">
>         <h3>No Answers</h3>
>         <p id="divNone"></p>
>       </div>
>       <br>
>     </div>
>     		</body>
> 
>

Edit: Screwed up the formatting. Sorry! But check it, it works.

Upvotes: 0

Taki
Taki

Reputation: 17654

use a percentage width for the .column instead of a fixed wone

.column{ width : 33.33%; }

var alts = "";

function loadMap() {
  var map = document.getElementById("statemap");
  map.addEventListener("click", function(evt) {
    var alt = evt.target.alt;
    alts = alt;
    var id = evt.target.id;
    ids = id;
    document.getElementById('divIdMessage').innerHTML = "What is the capital of " + evt.target.id + "?";
  });
}


function shows() {
  document.getElementById("divIdMessage").innerHTML = "Click on a state to get started."

}

function show() {
  document.getElementById("text").value = "";
  document.getElementById('divIdAnswer').innerHTML = "";
}


function checkAnswer() {
  if (!alts) {
    document.getElementById("divIdAnswer").innerHTML = "Must click on a state first.";
    return;
  }
  var submittedAnswer = document.getElementById('text').value;
  var correctAnswer = alts;
  if (submittedAnswer == correctAnswer) {
    document.getElementById('divIdAnswer').innerHTML = "Good job, that is correct!";
    document.getElementById('divCorrect').innerHTML += ids + "<br>";
  } else if (submittedAnswer != correctAnswer) {
    document.getElementById('divIdAnswer').innerHTML = "I'm sorry, that is incorrect. The correct answer is: " + alts + ".";
    document.getElementById('divIncorrect').innerHTML += ids + "<br>"
  }

  alts = "";

}
.column {
  float: left;
  position: relative;
  width: 33.33%;
  height: 200px;
  border: 0px;
  box-sizing: border-box;
}

body {
  padding: 10 px;
  text-align: center;
  background-color: #GF5D89;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
<body onload="loadMap(); shows()">
  <h1>Do you know the capitals of each of the United States of America?</h1>
  <h2>Use this map to test your knowledge.</h2>
  <img src="http://www.conceptdraw.com/How-To-Guide/picture/Geo-Map--USA.png" width="819" height="492" alt="States" usemap="#statemap">

  <map id="statemap" name="statemap">
        <area shape="rect" coords="30,80,120,130" id="Oregon" alt="Salem" onClick="show()"/>
        <area shape="rect" coords="60,70,130,20" id="Washington" alt="Olympia" onClick="show()" />
        <area shape="rect" coords="80,170,130,220" id="Nevada" alt="Carson City" onClick="show()" />
        <area shape="rect" coords="125,110,185,150" id="Boise" alt="Idaho" onClick="show()" />
        <area shape="rect" coords="180,50,260,100" id="Montana" alt="Helena" onClick="show()"/>
        <area shape="rect" coords="200,125,280,185" id="Wyoming" alt="Cheyenne" onClick="show()" />
        <area shape="rect" coords="50,380,130,430" id="Alaska" alt="Juno" onClick="show()" />
        <area shape="rect" coords="140,180,210,250" id="Utah" alt="U" onClick="show()" />
        <area shape="rect" coords="130,260,190,330" id="Arizona" alt="A" onClick="show()" />
        <area shape="rect" coords="215,195,300,255" id="Colorado" alt="Colorado" onClick="show()" />
        <area shape="rect" coords="205,260,280,350" id="New Mexico" alt="New Mexico" onClick="show()" />
        <area shape="rect" coords="330,270,410,320" id="Oklahoma" alt="Oklahoma" onClick="show()" />
        <area shape="rect" coords="420,275,470,340" id="Arkansas" alt="Arkansas" onClick="show()" />
        <area shape="rect" coords="310,220,410,270" id="Kansas" alt="Kansas" onClick="show()" />
        <area shape="rect" coords="410,230,470,275" id="Missouri" alt="Missouri" onClick="show()" />
        <area shape="rect" coords="310,170,390,220" id="Nebraska" alt="Nebraska" onClick="show()" />
        <area shape="rect" coords="290,110,380,160" id="South Dakota" alt="South Dakota" onClick="show()" />
        <area shape="rect" coords="390,150,450,200" id="Iowa" alt="Iowa" onClick="show()" />
        <area shape="rect" coords="290,50,380,100" id="North Dakota" alt="North Dakota" onClick="show()" />
        <area shape="rect" coords="380,60,440,150" id="Minnesota" alt="Minnesota" onClick="show()" />
        <area shape="rect" coords="280,320,390,430" id="Texas" alt="Texas" onClick="show()" />
        <area shape="rect" coords="420,370,490,400" id="Louisiana" alt="Louisiana" onClick="show()" />
        <area shape="rect" coords="195,410,280,490" id="Hawaii" alt="Hawaii" onClick="show()" />
        <area shape="rect" coords="20,210,90,250" id="California" alt="California" onClick="show()" />
    </map>
  <div id="divIdMessage"></div>
  <br>
  <textarea id="text" style="text-align:center; margin: 0 auto">Type answer here</textarea>
  <br>
  <br>
  <input type="button" id="myBtn" value="Check Answer" style="text-align:center; margin: 0 auto" onClick="checkAnswer()">
  <br>
  <br>
  <div id="divIdAnswer"></div>
  <br>
  <div class="row">
    <div class="column" style="background-color:#aaa;">
      <h3>Correct Answers</h3>
      <p id="divCorrect"></p>
    </div>
    <div class="column" style="background-color:#bbb">
      <h3>Incorrect Answers</h3>
      <p id="divIncorrect"></p>
    </div>
    <div class="column" style="background-color:#ccc;">
      <h3>No Answers</h3>
      <p id="divNone"></p>
    </div>
    <br>
  </div>
</body>

Upvotes: 0

Related Questions