Question

我正在努力做一个大的“你是对的！”在猫/狗图像，但我不知道如何。我猜我必须在javascript中创建一个函数来检查答案是否正确？

Codepen链接：

    var questions = [
        ['http://i.imgur.com/xKE07.jpg', '1'],
        ['http://images6.fanpop.com/image/photos/32900000/Cat-cats-32958715-1440-900.jpg', '1'],
        ['http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg', '1'],
        ['http://www.bubblews.com/assets/images/news/1825371279_1382541931.jpg', '1'],
        ['http://stylonica.com/wp-content/uploads/2014/03/Cute-Dog-Wallpaper.jpg', '0'],
        ['http://upload.wikimedia.org/wikipedia/commons/2/26/YellowLabradorLooking_new.jpg', '0'],
        ['http://thestylishdog.com/wp-content/uploads/2009/07/cute-dog2.jpg', '0'],
        ['http://w8themes.com/wp-content/uploads/2013/09/Dog-Computer-Wallpaper.jpg', '0']
    ];
    var qNo = 0;
    var correct = 0;
    var cnt = 0;

    function NextQuestion(response) {
        if ((qNo < questions.length) && (response == questions[qNo][1])) {
            correct++;
        }
        document.getElementById('urscore').style.display = "block"
        document.getElementById('score').innerHTML = ' you have ' + correct + ' of ' + (cnt + 1) + ' ';
        qNo++;
        if (qNo < questions.length) {
            document.getElementById('img').src = questions[qNo][0];
            cnt++;
        }
    }

    onload = function () {
        document.getElementById('img').src = questions[0][0];


    }

HTML

<div id="header">
    <h1>Cat or a dog?</h1>
</div>
<img height="250" id="img">
<div id="wrapper">
    <button class="left" onclick="NextQuestion('0')">That's a dog!</button>
    <button class="right" onclick="NextQuestion('1')">That's a cat!</button>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="urscore">This is your score</div>
    <div id="score"></div>
    <div id="results"></div>

Answer 1

这样做 - 您可能希望使用超时来显示文本并延迟下一个图像

我没有花时间设计答案

Live Demo

function NextQuestion(response) {
  var ovl = document.getElementById("overlay");
  ovl.innerHTML=response == questions[qNo][1]?"You are correct":"Nope";
  if ((qNo < questions.length) && (response == questions[qNo][1])) {
    correct++;
  }
  ovl.style.display="";
  document.getElementById('urscore').style.display = "block"
  document.getElementById('score').innerHTML = ' you have ' + correct + 
    ' of ' + (cnt + 1) + ' ';
  qNo++;
  if (qNo < questions.length) {
    document.getElementById('img').onload=function() { ovl.style.display="none" }
    document.getElementById('img').src = questions[qNo][0];
    cnt++;
  }
}
window.onload = function () {
  document.getElementById('img').src = questions[0][0];
}

如何显示答案是否正确

1 个答案: