Question

仅使用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; }

Answer 1

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

但更简单的方法是将正确元素的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以立即转到第一个问题。再次，取决于你想要发生什么。

Answer 2

我很害羞你想在你的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 eventlistener中检查right_side值

Answer 3

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

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/

Javascript游戏的q和a

3 个答案: