javascript - 如何创建 Javascript 真假测验

问题描述

我目前正在用 javascript、html 和 css 创建一个真假测验。测验没有问题，只有图片，它还有一个用户必须遵守的一般指令集。我在前端设置了测验，但是用户必须单击的是或否按钮没有响应。

我首先为每个问题创建一个 div，其中 question1 是questiona等等。
我还在每个问题的 div 之后创建了是或否按钮。然后为了与 javascript 建立必要的连接，我为每个问题创建了 2 个函数，例如：

问题 1 具有函数questionyes1和questionno1，这些函数指定了单击是或否时按钮的反应，但我看不到任何结果。

function questionyes1() {
  document.getElementById('questiona').innerHTML = "correct! Tolulene is used to manufacture paint";
  document.getElementById('questiona').style.color = "green";
}

function questionno1() {
  document.getElementById('questiona').innerHTML = "Wrong! Tolulene is used to manufacture paint";
  document.getElementById('questiona').style.color = "red";
}

function questionyes2() {
  document.getElementById('questionb').innerHTML = "correct! Tar is used paving roads and coating roofs";
  document.getElementById('questionb').style.color = "green";
}

function questionno2() {
  document.getElementById('questionb').innerHTML = "Wrong! Tar is used paving roads and coating roofs";
  document.getElementById('questionb').style.color = "red";
}

function questionyes3() {
  document.getElementById('questionc').innerHTML = "correct! Cadmium is the main component in battery acid";
  document.getElementById('questionc').style.color = "green";
}

function questionno3() {
  document.getElementById('questionc').innerHTML = "Wrong! Cadmium is the main component in battery acid";
  document.getElementById('questionc').style.color = "red";
}

function questionyes4() {
  document.getElementById('questiond').innerHTML = "correct! Methanol is an active component in rocket fuel";
  document.getElementById('questiond').style.color = "green";
}

function questionno4() {
  document.getElementById('questiond').innerHTML = "Wrong! Methanol is an active component in rocket fuel";
  document.getElementById('questiond').style.color = "red";
}

function questionyes5() {
  document.getElementById('questione').innerHTML = "correct! ";
  document.getElementById('questione').style.color = "green";
}

function questionno5() {
  document.getElementById('questione').innerHTML = "Wrong!";
  document.getElementById('questione').style.color = "red";
}

<h1>Instructions:</h1>
<div class="boxed">Below are series of images. Select 'Yes' if you think the item contains the same ingredients as a tobacco.
</div>
<br>
<br>
<div id="questiona">
  <h4>Paint</h4>
  <svg aria-hidden="true" width="50px" height="50px" focusable="false" data-prefix="fas" data-icon="paint-roller" class="svg-inline--fa fa-paint-roller fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M416 128V32c0-17.67-14.33-32-32-32H32C14.33 
                0 0 14.33 0 32v96c0 17.67 14.33 32 32 32h352c17.67 0 32-14.33 32-32zm32-64v128c0 17.67-14.33 32-32 
                32H256c-35.35 0-64 28.65-64 64v32c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 
                32-32V352c0-17.67-14.33-32-32-32v-32h160c53.02 0 96-42.98 96-96v-64c0-35.35-28.65-64-64-64z"></path></svg>
</div>
<button id="questiona" type="button" onclick="questionyes1()">Yes</button>
<button id="questiona" onclick="questionno1()">No</button>
<br>
<br>
<div id="questionb">
  <h4>Roof Coating</h4>
  <svg aria-hidden="true" width="50px" height="50px" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" 
              d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 
              16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 
              148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 
              12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 
              12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>
</div>
<button id="questionb" onclick="questionyes2()">Yes</button>
<button id="questionb" onclick="questionno2()">No</button>
<br>
<br>
<div id="questionc">
  <h4>Batteries</h4>
  <svg aria-hidden="true" width="50px" height="50px" focusable="false" data-prefix="fas" data-icon="car-battery" class="svg-inline--fa fa-car-battery fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" 
                d="M480 128h-32V80c0-8.84-7.16-16-16-16h-96c-8.84 0-16 7.16-16 16v48H192V80c0-8.84-7.16-16-16-16H80c-8.84 
                0-16 7.16-16 16v48H32c-17.67 0-32 14.33-32 32v256c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32V160c0-17.67-14.33-32-32-32zM192 
                264c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8v-16c0-4.42 3.58-8 8-8h112c4.42 0 8 3.58 8 8v16zm256 0c0 4.42-3.58 
                8-8 8h-40v40c0 4.42-3.58 8-8 8h-16c-4.42 0-8-3.58-8-8v-40h-40c-4.42 0-8-3.58-8-8v-16c0-4.42 3.58-8 8-8h40v-40c0-4.42 
                3.58-8 8-8h16c4.42 0 8 3.58 8 8v40h40c4.42 0 8 3.58 8 8v16z"></path></svg>
</div>
<button onclick="questionyes3()">Yes</button>
<button onclick="questionno3()">No</button>
<br>
<br>
<div id="questiond">
  <h4>Rocket-Fuel</h4>
  <svg aria-hidden="true" width="50px" height="50px" focusable="false" data-prefix="fas" data-icon="rocket" class="svg-inline--fa fa-rocket fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path fill="currentColor" d="M505.12019,19.09375c-1.18945-5.53125-6.65819-11-12.207-12.1875C460.716,
                0,435.507,0,410.40747,0,307.17523,0,245.26909,55.20312,199.05238,128H94.83772c-16.34763.01562-35.55658,
                11.875-42.88664,26.48438L2.51562,253.29688A28.4,28.4,0,0,0,0,264a24.00867,24.00867,0,0,0,24.00582,
                24H127.81618l-22.47457,22.46875c-11.36521,11.36133-12.99607,32.25781,0,45.25L156.24582,406.625c11.15623,
                11.1875,32.15619,13.15625,45.27726,0l22.47457-22.46875V488a24.00867,24.00867,0,0,0,24.00581,24,28.55934,
                28.55934,0,0,0,10.707-2.51562l98.72834-49.39063c14.62888-7.29687,26.50776-26.5,26.50776-42.85937V312.79688c72.59753-46.3125,
                128.03493-108.40626,128.03493-211.09376C512.07526,76.5,512.07526,51.29688,505.12019,19.09375ZM384.04033,168A40,40,0,1,1,424.05,128,
                40.02322,40.02322,0,0,1,384.04033,168Z"></path></svg>
</div>
<button onclick="questionyes4()">Yes</button>
<button onclick="questionno4()">No</button>
<br>
<br>
<div id="questione">
  <h4>Soft-drinks</h4>
  <svg aria-hidden="true" width="50px" height="50px" focusable="false" data-prefix="fas" data-icon="wine-glass" class="svg-inline--fa fa-wine-glass fa-w-9" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 512"><path fill="currentColor" d="M216 464h-40V346.81c68.47-15.89 118.05-79.91 111.4-154.16l-15.95-178.1C270.71 6.31 263.9 0 255.74 0H32.26c-8.15 0-14.97 6.31-15.7 14.55L.6 192.66C-6.05 266.91 43.53 330.93 112 346.82V464H72c-22.09 0-40 17.91-40 40 0 4.42 3.58 8 8 8h208c4.42 0 8-3.58 8-8 0-22.09-17.91-40-40-40z"></path></svg>
</div>
<button onclick="questionyes5()">Yes</button>
<button onclick="questionno5()">No</button>

标签： javascripthtmlcss

javascript - 如何创建 Javascript 真假测验

问题描述

解决方案

推荐阅读