Question

我该如何用绿色突出显示正确回答的问题，用红色突出显示错误的问题（或者有一个图像表示正确的答案，另一个图像表示错误的答案）。我想让它在正确回答的问题旁边有一个透明的绿色复选标记图像。

链接到绿色的选中标记：http://pluspng.com/img-png/green-tick-png-green-tick-png-file-570.png

链接到红色标记：https://upload.wikimedia.org/wikipedia/en/thumb/b/ba/Red_x.svg/1024px-Red_x.svg.png

这是我的HTML代码：

</div>
    <link href="x.css" rel=stylesheet type="text/css">
<div class="container">

<!DOCTYPE HTML>

<html>
<head>

<body>
    <center><h1>Geography Questions</h1></center>
    <p>
    <form name="quiz">
    <p>

<b><br>1) What is Earth's largest continent?<br></b>
<blockquote>
<input type="radio" name="q1" value="Africa">Africa<br>
<input type="radio" name="q1" value="Asia">Asia<br>
<input type="radio" name="q1" value="Europe">Europe<br>
<input type="radio" name="q1" value="Antarctica">Antarctica<br>
</blockquote>

<p><b>
<hr>
<br>2) What razor-thin country accounts for more than half of the western coastline of South America?
<br></b>
<blockquote>
<input type="radio" name="q2" value="Peru">Peru<br>
<input type="radio" name="q2" value="Bolivia">Bolivia<br>
<input type="radio" name="q2" value="Chile">Chile<br>
<input type="radio" name="q2" value="Ecuador">Ecuador<br>
</blockquote>
<p><b>
<hr>

<br>3) What river runs through Baghdad?<br></b>
<blockquote>
<input type="radio" name="q3" value="Jordan River">Jordan River<br>
<input type="radio" name="q3" value="Tigris River">Tigris River<br>
<input type="radio" name="q3" value="Euphrates River">Euphrates River<br>
<input type="radio" name="q3" value="Karun River">Karun River<br>
</blockquote>
<p><b>
<hr>

<br>4) What country has the most natural lakes?<br></b>
<blockquote>
<input type="radio" name="q4" value="India">India<br>
<input type="radio" name="q4" value="Canada">Canada<br>
<input type="radio" name="q4" value="United States">United States<br>
<input type="radio" name="q4" value="Australia">Australia<br>
</blockquote>
<p><b>
<hr>

<br>5) What is the only sea without any coasts?<br></b>
<blockquote>
<input type="radio" name="q5" value="Adriatic Sea">Adriatic Sea<br>
<input type="radio" name="q5" value="Sargasso Sea">Sargasso Sea<br>
<input type="radio" name="q5" value="Celebes Sea">Celebes Sea<br>
<input type="radio" name="q5" value="Mediterranean Sea">Mediterranean Sea<br>
</blockquote>
<p><b>
<hr>

<br>6) What percentage of the River Nile is located in Egypt?<br></b>
<blockquote>
<input type="radio" name="q6" value="22%">22%<br>
<input type="radio" name="q6" value="100%">100%<br>
<input type="radio" name="q6" value="9%">9%<br>
<input type="radio" name="q6" value="98%">98%<br>
</blockquote>
<p><b>

<br>7) What is the driest place on Earth?<br></b>
<blockquote>
<input type="radio" name="q7" value="Kufra Libya">Kufra, Libya<br>
<input type="radio" name="q7" value="Atacama Desert">Atacama Desert<br>
<input type="radio" name="q7" value="Sahara Desert">Sahara Desert<br>
<input type="radio" name="q7" value="McMurdo Antarctica">McMurdo, Antarctica<br>
</blockquote>
<p><b>
<hr>

<br>8) In what country can you visit Machu Picchu?
<br></b>
<blockquote>
<input type="radio" name="q8" value="Columbia">Columbia<br>
<input type="radio" name="q8" value="Peru">Peru<br>
<input type="radio" name="q8" value="Chile">Chile<br>
<input type="radio" name="q8" value="Bolivia">Bolivia<br>
</blockquote>
<p><b>
<hr>

<br>9) Which African nation has the most pyramids?<br></b>
<blockquote>
<input type="radio" name="q9" value="Egypt">Egypt<br>
<input type="radio" name="q9" value="Algeria">Algeria<br>
<input type="radio" name="q9" value="Sudan">Sudan<br>
<input type="radio" name="q9" value="Libya">Libya<br>
</blockquote>
<p><b>
<hr>

<br>10) What African country served as the setting for Tatooine in Star Wars?<br></b>
<blockquote>
<input type="radio" name="q10" value="Ghana">Ghana<br>
<input type="radio" name="q10" value="Ethiopia">Ethiopia<br>
<input type="radio" name="q10" value="Tunisia">Tunisia<br>
<input type="radio" name="q10" value="Gabon">Gabon<br>
</blockquote>
<p><b>
<hr>

<br>11) What is the oldest city in the world?<br></b>
<blockquote>
<input type="radio" name="q11" value="Damascus">Damascus<br>
<input type="radio" name="q11" value="Jericho">Jericho<br>
<input type="radio" name="q11" value="Athens">Athens<br>
<input type="radio" name="q11" value="Jerusalem">Jerusalem<br>
</blockquote>
<p><b>
<hr>

<br>12) Which U.S. state has the most active volcanoes?<br></b>
<blockquote>
<input type="radio" name="q12" value="Washington">Washington<br>
<input type="radio" name="q12" value="Hawaii">Hawaii<br>
<input type="radio" name="q12" value="Alaska">Alaska<br>
<input type="radio" name="q12" value="California">California<br>
</blockquote>
<p><b>
<hr>

<br>13) What is the flattest continent?<br></b>
<blockquote>
<input type="radio" name="q13" value="South America">South America<br>
<input type="radio" name="q13" value="Antarctica">Antarctica<br>
<input type="radio" name="q13" value="Africa">Africa<br>
<input type="radio" name="q13" value="Australia">Australia<br>
</blockquote>
<p><b>
<hr>

<br>14) What is the largest country on the Arabian Peninsula?<br></b>
<blockquote>
<input type="radio" name="q14" value="Saudia Arabia">Saudia Arabia<br>
<input type="radio" name="q14" value="United Arab Emirates">United Arab Emirates<br>
<input type="radio" name="q14" value="Jordan">Jordan<br>
<input type="radio" name="q14" value="Yemen">Yemen<br>
</blockquote>
<p><b>
<hr>

<br>15) What country has the most coastline?<br></b>
<blockquote>
<input type="radio" name="q15" value="China">China<br>
<input type="radio" name="q15" value="United States">United States<br>
<input type="radio" name="q15" value="Russia">Russia<br>
<input type="radio" name="q15" value="Canada">Canada<br>
</blockquote>
<p><b>


<input type="button"value="Grade Me"onClick="getScore(this.form);">
<input type="reset" value="Clear"><p>
Number of score out of 15 = <input type= text size 15 name= "mark">
Score in percentage = <input type=text size=15 name="percentage"><br>

</form>
<p>

    <form method="post" name="Form" onsubmit="" action="">
</form>

</body>


<script>
    var numQues = 15;
var numChoi = 3;
var answers = new Array(15);
    answers[0] = "Asia";
    answers[1] = "Chile";
    answers[2] = "Tigris River";
    answers[3] = "Canada";
    answers[4] = "Sargasso Sea";
    answers[5] = "22%";
    answers[6] = "McMurdo, Antarctica";
    answers[7] = "Peru";
    answers[8] = "Sudan";
    answers[9] = "Tatooine";
    answers[10] = "Damascus";
    answers[11] = "Alaska";
    answers[12] = "Australia";
    answers[13] = "Saudi Arabia";
    answers[14] = "Canada";
      function getScore(form) {

   var score = 0;
  var currElt;
  var currSelection;
  for (i=0; i<numQues; i++) {
    currElt = i*numChoi;
    answered=false; 
    for (j=0; j<numChoi; j++) {
      currSelection = form.elements[currElt + j];
      if (currSelection.checked) {
        answered=true;
        if (currSelection.value == answers[i]) {
          score++;
          break;
        }
      }
    }
    if (answered ===false){alert("You Must Answer All Questions") ;return false;}
  }

  var scoreper = Math.round(score/numQues*100);
  form.percentage.value = scoreper + "%";
  form.mark.value=score;

}
    </script>
</html>

Answer 1

您的代码有几个错误。

我首先注意到的是一些不好的html语法。

您打开了一个head标签，从未将其关闭。

在运行脚本时，即使检查了所有广播，我也会收到You must answer all question警报。

也不知道是什么

</div>
    <link href="x.css" rel=stylesheet type="text/css">
<div class="container">

在<!Doctype html>之前做。

再次使用错误的语法<\div> ... <div>

我将重点介绍脚本问题

首先，您用于检查无线电是否被检查的代码是错误的；我将其更改为：

for (j=0; j<numChoi; j++) {
    currSelection = form.elements[currElt + j];
    console.log(currSelection.checked);
    if (currSelection.checked) {
        answered=true;
        if (currSelection.value == answers[i]) {
            score++;
            break;
        }
    }
}

对此：

var currSelection = new Array(numChoi);
var answered = false;
for (j = 0; j < numChoi; j++){
  currSelection[j] = form.elements[currElt + j];
  answered = answered || currSelection[j].checked;
  if (currSelection[j].checked && currSelection[j].value == answers[i]){
    score++;
    break;
  }
}

您的代码非常适合您的问题，其中包括突出显示和图像：

<!DOCTYPE HTML>
<html>

<body>
    <center><h1>Geography Questions</h1></center>
    <p>
    <form name="quiz">
    <p>

<b><br>1) What is Earth's largest continent?<br></b>
<blockquote>
<input type="radio" name="q1" value="Africa"><label class='label'>Africa</label><br>
<input type="radio" name="q1" value="Asia"><label class='label'>Asia</label><br>
<input type="radio" name="q1" value="Europe"><label class='label'>Europe</label><br>
<input type="radio" name="q1" value="Antarctica"><label class='label'>Antarctica</label><br>
</blockquote>

<p><b>
<hr>
<br>2) What razor-thin country accounts for more than half of the western coastline of South America?
<br></b>
<blockquote>
<input type="radio" name="q2" value="Peru"><label class='label'>Peru</label><br>
<input type="radio" name="q2" value="Bolivia"><label class='label'>Bolivia</label><br>
<input type="radio" name="q2" value="Chile"><label class='label'>Chile</label><br>
<input type="radio" name="q2" value="Ecuador"><label class='label'>Ecuador</label><br>
</blockquote>
<p><b>
<hr>

<br>3) What river runs through Baghdad?<br></b>
<blockquote>
<input type="radio" name="q3" value="Jordan River"><label class='label'>Jordan River</label><br>
<input type="radio" name="q3" value="Tigris River"><label class='label'>Tigris River</label><br>
<input type="radio" name="q3" value="Euphrates River"><label class='label'>Euphrates River</label><br>
<input type="radio" name="q3" value="Karun River"><label class='label'>Karun River</label><br>
</blockquote>
<p><b>
<hr>

<br>4) What country has the most natural lakes?<br></b>
<blockquote>
<input type="radio" name="q4" value="India"><label class='label'>India</label><br>
<input type="radio" name="q4" value="Canada"><label class='label'>Canada</label><br>
<input type="radio" name="q4" value="United States"><label class='label'>United States</label><br>
<input type="radio" name="q4" value="Australia"><label class='label'>Australia</label><br>
</blockquote>
<p><b>
<hr>

<br>5) What is the only sea without any coasts?<br></b>
<blockquote>
<input type="radio" name="q5" value="Adriatic Sea"><label class='label'>Adriatic Sea</label><br>
<input type="radio" name="q5" value="Sargasso Sea"><label class='label'>Sargasso Sea</label><br>
<input type="radio" name="q5" value="Celebes Sea"><label class='label'>Celebes Sea</label><br>
<input type="radio" name="q5" value="Mediterranean Sea"><label class='label'>Mediterranean Sea</label><br>
</blockquote>
<p><b>
<hr>

<br>6) What percentage of the River Nile is located in Egypt?<br></b>
<blockquote>
<input type="radio" name="q6" value="22%"><label class='label'>22%</label><br>
<input type="radio" name="q6" value="100%"><label class='label'>100%</label><br>
<input type="radio" name="q6" value="9%"><label class='label'>9%</label><br>
<input type="radio" name="q6" value="98%"><label class='label'>98%</label><br>
</blockquote>
<p><b>
<hr>

<br>7) What is the driest place on Earth?<br></b>
<blockquote>
<input type="radio" name="q7" value="Kufra Libya"><label class='label'>Kufra, Libya</label><br>
<input type="radio" name="q7" value="Atacama Desert"><label class='label'>Atacama Desert</label><br>
<input type="radio" name="q7" value="Sahara Desert"><label class='label'>Sahara Desert</label><br>
<input type="radio" name="q7" value="McMurdo Antarctica"><label class='label'>McMurdo, Antarctica</label><br>
</blockquote>
<p><b>
<hr>

<br>8) In what country can you visit Machu Picchu?
<br></b>
<blockquote>
<input type="radio" name="q8" value="Columbia"><label class='label'>Columbia</label><br>
<input type="radio" name="q8" value="Peru"><label class='label'>Peru</label><br>
<input type="radio" name="q8" value="Chile"><label class='label'>Chile</label><br>
<input type="radio" name="q8" value="Bolivia"><label class='label'>Bolivia</label><br>
</blockquote>
<p><b>
<hr>

<br>9) Which African nation has the most pyramids?<br></b>
<blockquote>
<input type="radio" name="q9" value="Egypt"><label class='label'>Egypt</label><br>
<input type="radio" name="q9" value="Algeria"><label class='label'>Algeria</label><br>
<input type="radio" name="q9" value="Sudan"><label class='label'>Sudan</label><br>
<input type="radio" name="q9" value="Libya"><label class='label'>Libya</label><br>
</blockquote>
<p><b>
<hr>

<br>10) What African country served as the setting for Tatooine in Star Wars?<br></b>
<blockquote>
<input type="radio" name="q10" value="Ghana"><label class='label'>Ghana</label><br>
<input type="radio" name="q10" value="Ethiopia"><label class='label'>Ethiopia</label><br>
<input type="radio" name="q10" value="Tunisia"><label class='label'>Tunisia</label><br>
<input type="radio" name="q10" value="Gabon"><label class='label'>Gabon</label><br>
</blockquote>
<p><b>
<hr>

<br>11) What is the oldest city in the world?<br></b>
<blockquote>
<input type="radio" name="q11" value="Damascus"><label class='label'>Damascus</label><br>
<input type="radio" name="q11" value="Jericho"><label class='label'>Jericho</label><br>
<input type="radio" name="q11" value="Athens"><label class='label'>Athens</label><br>
<input type="radio" name="q11" value="Jerusalem"><label class='label'>Jerusalem</label><br>
</blockquote>
<p><b>
<hr>

<br>12) Which U.S. state has the most active volcanoes?<br></b>
<blockquote>
<input type="radio" name="q12" value="Washington"><label class='label'>Washington</label><br>
<input type="radio" name="q12" value="Hawaii"><label class='label'>Hawaii</label><br>
<input type="radio" name="q12" value="Alaska"><label class='label'>Alaska</label><br>
<input type="radio" name="q12" value="California"><label class='label'>California</label><br>
</blockquote>
<p><b>
<hr>

<br>13) What is the flattest continent?<br></b>
<blockquote>
<input type="radio" name="q13" value="South America"><label class='label'>South America</label><br>
<input type="radio" name="q13" value="Antarctica"><label class='label'>Antarctica</label><br>
<input type="radio" name="q13" value="Africa"><label class='label'>Africa</label><br>
<input type="radio" name="q13" value="Australia"><label class='label'>Australia</label><br>
</blockquote>
<p><b>
<hr>

<br>14) What is the largest country on the Arabian Peninsula?<br></b>
<blockquote>
<input type="radio" name="q14" value="Saudia Arabia"><label class='label'>Saudia Arabia</label><br>
<input type="radio" name="q14" value="United Arab Emirates"><label class='label'>United Arab Emirates</label><br>
<input type="radio" name="q14" value="Jordan"><label class='label'>Jordan</label><br>
<input type="radio" name="q14" value="Yemen"><label class='label'>Yemen</label><br>
</blockquote>
<p><b>
<hr>

<br>15) What country has the most coastline?<br></b>
<blockquote>
<input type="radio" name="q15" value="China"><label class='label'>China</label><br>
<input type="radio" name="q15" value="United States"><label class='label'>United States</label><br>
<input type="radio" name="q15" value="Russia"><label class='label'>Russia</label><br>
<input type="radio" name="q15" value="Canada"><label class='label'>Canada</label><br>
</blockquote>
<p><b>


<input type="button"value="Grade Me" onClick="getScore(this.form);">
<input type="reset" value="Clear"><p>
Number of score out of 15 = <input type= text size 15 name= "mark">
Score in percentage = <input type=text size=15 name="percentage"><br>

</form>
<p>

    <form method="post" name="Form" onsubmit="" action="">
</form>

</body>


<script>
  var numQues = 15;

  //Here we are going to preload our images.
  //This makes it easier to append and
  //Its also a good practice doing it this way
  var img = {
    img: new Array(numQues),
    green: new Image(),
    red: new Image(),
  };
  img.green.src = "http://pluspng.com/img-png/green-tick-png-green-tick-png-file-570.png";
  img.red.src = "https://upload.wikimedia.org/wikipedia/en/thumb/b/ba/Red_x.svg/1024px-Red_x.svg.png";

  var numChoi = 4;
  var answers = new Array(15);
    answers[0] = "Asia";
    answers[1] = "Chile";
    answers[2] = "Tigris River";
    answers[3] = "Canada";
    answers[4] = "Sargasso Sea";
    answers[5] = "22%";
    answers[6] = "McMurdo, Antarctica";
    answers[7] = "Peru";
    answers[8] = "Sudan";
    answers[9] = "Tatooine";
    answers[10] = "Damascus";
    answers[11] = "Alaska";
    answers[12] = "Australia";
    answers[13] = "Saudi Arabia";
    answers[14] = "Canada";
  var labels = document.getElementsByClassName('label');
  function getScore(form) {
    var score = 0;
    var currElt;
    for (i=0; i<numQues; i++) {
      currElt = i*numChoi;

      /*for (j=0; j<numChoi; j++) {
        currSelection = form.elements[currElt + j];
        console.log(currSelection.checked);
        if (currSelection.checked) {
          answered=true;
          if (currSelection.value == answers[i]) {
            score++;
            break;
          }
        }
      }*/

      var currSelection = new Array(numChoi);
      var answered = false;
      for (j = 0; j < numChoi; j++){
        currSelection[j] = form.elements[currElt + j];
        answered = answered || currSelection[j].checked;
        if (currSelection[j].checked) {
          img.img[currElt + j] = new Image();
          img.img[currElt + j].width = '12';
          img.img[currElt + j].height = '12';
          if (currSelection[j].value == answers[i]){
            score++;
            //Go Green
            labels[currElt + j].style.color = 'green';
            img.img[currElt + j].src = img.green.src;
            labels[currElt + j].appendChild(img.img[currElt + j]);
            break;
          }
          else{
            //Go Red
            labels[currElt + j].style.color = 'red';
            img.img[currElt + j].src = img.red.src
            labels[currElt + j].appendChild(img.img[currElt + j]);
          }
        }
      }

      if (answered == false){
        resetLabels(labels); //Reset Label color and remove images.
        alert("You Must Answer All Questions");
        return false;
      }
    }

    var scoreper = Math.round(score/numQues*100);
    form.percentage.value = scoreper + "%";
    form.mark.value=score;
  }

  function  resetLabels(item){
    for (i = 0; i<item.length; i++){
      if(item[i].childNodes.length > 1){
        item[i].removeChild(item[i].childNodes[1]);
        item[i].style.color = 'black';
      }
    }
  }
    </script>
</html>

突出显示颜色的分级测验

1 个答案: