1

仅使用 JavaScript。我有四个问题的数组，四个答案的数组和四个错误答案的数组。由于订单，我使用数组。当出现第一个问题时，计算机会生成一个随机数，并根据该数将正确答案放在左边或右边，将错误答案放在另一个位置。我在包含这些答案的左右 div 上注册了两个事件处理程序。
个人会根据问题选择左或右div，四个问题后，我会告诉你你做得如何。

我的问题是如何确定他们选择了哪一方以及是对还是错。我可以使用 event.target.id 来确定该人选择了什么，但是知道它是随机的，如何将其与正确答案进行比较？

我太新了……我说的是新的吗……这是我尝试过的代码……我认为它很简单，但是我没有完成正确的事件监听器。而且我知道camelCasing，但我想先粗略剪一下

window.onload = function () {
    var questions = new Array();
    questions[0] = "This is the first question";
    questions[1] = "This is the second question";
    questions[2] = "This is the third question";
    questions[3] = "This is the fourth question";

    var answers = new Array();
    answers[0] = "first answer";
    answers[1] = "second answer";
    answers[2] = "third answer";
    answers[3] = "fourth answer";

    var garbage = new Array();
    garbage[0] = "first garbage";
    garbage[1] = "second garbage";
    garbage[2] = "third garbage";
    garbage[3] = "fourth garbage";

    var k = 0;
    var q = document.getElementById("questionId");
    var a = document.getElementById("left");
    var g = document.getElementById("right");
    var nxtquestion = document.getElementById('nextquestion');

    nxtquestion.addEventListener('mousedown', nextquestion, false);
    a.addEventListener('mousedown', rightwrong, false);
    g.addEventListener('mousedown', rightwrong, false);

    function nextquestion() {
        for (var i = 0; i < questions.length; i++) {
            q.innerHTML = questions[k];
        }
        randomize(k);
        k++;
        if (k > questions.length) {
            q.innerHTML = "Great, you have finished.  Please reload the page to play again!";
            a.innerHTML = "";
            g.innerHTML = "";
            nxtquestion.style.display = "none";
        }
        return;
    }

    function randomize(k) {
        var randomizer = Math.floor((Math.random() * 10) + 1);

        if (randomizer <= 5) {
            a.innerHTML = answers[k];
            g.innerHTML = garbage[k];
        } else {
            g.innerHTML = answers[k];
            a.innerHTML = garbage[k];
        }
    }
}

这是HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>chapter 1</title>
<link rel="stylesheet" type="text/css" href="regart.css">
<script src="regart.js">
</script>
</head>
<body>
<header>
<img class="center" src="regart.jpg" width="278" height="113" alt="regart" />
</header>
<div class="middlesection">
<p id="questionId" class="question">Let's Play RegArt!<br /> Choose either left or right for the correct answer.<br /> To begin, click on the 'Next Question' button. </p><input type="button" id="nextquestion" value="Next Question" />
<p id="howmany"></p>

</div>

<div>
<div class="answerleft" id="left"><p>Left</p></div>  <div class="answerright" id="right"><p>Right</p></div>
</div>
<footer>
</footer>
</body>
</html

Here is the CSS... the image will be missing but not important
header, footer, nav
 { display:block; }

html,ul, li, div, h1, h2, h3, p, img
 {margin:0; padding:0;}


body 
 { width:80%; margin:auto; max-width:960px; font-size:100%; background-color:#401d36;}

header { height:120px; background-color:#0f9fbf; }

img.center {display:block;margin:0 auto;}


.middlesection { background-color:#f2e085; padding:20px 20px 0 20px; height:200px;border-style:dashed; color:#401d36; border-width:thin;}

p {font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size:1.2em; padding-left:10px; padding-bottom:30px;}



.answerleft {border-style:dashed; color:#0f9fbf; float:left; width:35%; padding:5%; height:200px; font-size:3em;  }
.answerright {border-style:dashed; color:#0f9fbf; float:right; width:35%; padding:5%; height:200px; font-size:3em; }
4

3 回答 3

0

一种方法是在元素本身上设置一些东西，然后检查它。或者为每个元素使用不同的事件处理程序（每次正确答案交换边时，您都必须删除然后重新添加它们）。

但更简单的方法是将正确元素的 id 存储在全局变量中，然后检查它，如下所示：

var rightAnswerId;

function rightwrong(e) { 
    if (e.target.id == rightAnswerId) {
        alert("CORRECT");
    } else { 
        alert("WRONG");
    }
}

function randomize(k) {
    var randomizer = Math.floor((Math.random() * 10) + 1);


    if (randomizer <= 5) {
        a.innerHTML = answers[k];
        g.innerHTML = garbage[k];
        rightAnswerId = 'left';
    } else {
        g.innerHTML = answers[k];
        a.innerHTML = garbage[k];
        rightAnswerId = 'right';
    }
}

还有各种其他解决方案，包括存储当前问题并将单击的元素内容与该问题的正确答案进行比较。

我将我的解决方案放入Fiddle中，这可能会让某人更容易想出更好的东西。

（我将事件从 更改mousedown为click，这对演示更有意义，但这取决于您想要发生的事情）。

您可能还想调用nextquestion页面加载以立即转到第一个问题。再次，取决于你想要发生什么。

于 2013-09-12T05:42:58.860 回答
0

我很确定你想在你的 for() 语句中使用k而不是i作为索引......无论如何：

但是如何将它与正确答案进行比较，知道它是随机的？

使用另一个变量来存储正确答案的位置

...

var right_side;

...

function randomize(k) {
    var randomizer = Math.floor((Math.random() * 10) + 1);

    if (randomizer <= 5) {
        a.innerHTML = answers[k];
        g.innerHTML = garbage[k];
        right_side = "left";
    } else {
        g.innerHTML = answers[k];
        a.innerHTML = garbage[k];
        right_side = "right";
    }
}

然后在你的rightwrong事件监听器中检查right_side值

于 2013-09-12T05:43:41.720 回答
0

您提供的代码缺少一项重要功能。但是我创建了一个你可以检查的小提琴。我认为这将解决您的问题，您可以从那里继续。

function randomize(k) {
        var randomizer = Math.floor((Math.random() * 10) + 1);

        if (randomizer <= 5) {
            a.innerHTML = answers[k];            
            g.innerHTML = garbage[k];
            a.addEventListener('mousedown', rightAnswer, false);
            g.addEventListener('mousedown', wrongAnswer, false);
        } else {
            g.innerHTML = answers[k];
            a.innerHTML = garbage[k];
            g.addEventListener('mousedown', rightAnswer, false);
            a.addEventListener('mousedown', wrongAnswer, false);
        }
    }

    function rightAnswer(){
        alert('You are right');
    }

    function wrongAnswer(){
         alert('You are wrong');
    }

http://jsfiddle.net/Pallab/ACXPN/embedded/result/

于 2013-09-12T05:57:31.743 回答