一个简单的直答问答系统

Question

我知道有很多免费/付费的问答系统，但没有一个是可定制的，特别是我需要它的RTL方向。

总之，我做了一个简单的脚本：小提琴

<!-- question 1 -->
<div id="01">hello there
<br />
<input id="01_correct_btn" type="button" onclick="getElementById('01_correct').style.display = 'block';
getElementById('01_continue').style.display = 'block';  this.style.display = 'none'; getElementById('01_wrong_a').style.display='none';getElementById('01_wrong_b').style.display='none'" />Hi
<br />
<input id="01_wrong_a" type="button" onclick="getElementById('01_wrong').style.display = 'block';
getElementById('01_continue').style.display = 'block';  this.style.display = 'none'; getElementById('01_correct_btn').style.display='none';
getElementById('01_wrong_b').style.display='none'" />bye
<br />
<input id="01_wrong_b" type="button" onclick="getElementById('01_wrong').style.display = 'block';
getElementById('01_continue').style.display = 'block';  this.style.display = 'none'; getElementById('01_correct_btn').style.display='none';
getElementById('01_wrong_a').style.display='none'" />thanks
<br />____________________
<div id="01_correct" style="display:none">yep, you're right...
    <br />
</div>
<div id="01_wrong" style="display:none">You are so wrong
    <br />
</div>
<input style="display:none" type="button" id="01_continue" onclick="getElementById('01').style.display = 'none';
getElementById('02').style.display = 'block'" value="continue" />
</div>
<!-- question 2 -->
<div id="02" style="display:none">question 2: Welcome to the real world</div>

1:我如何隐藏所有错误的答案而不必添加所有的ids (getElementByClassName不起作用)

2:与其重新复制每个问题的脚本，不如由JavaScript完成，在每个新表单中：

答："correct_btn"显示一个"correct_note"并隐藏所有其他按钮

"wrong_btn"显示一个"wrong_note"并隐藏所有其他按钮。

c. "correct_btn"和"wrong_btn"都将显示“继续”按钮

d. "continue"按钮隐藏当前div/窗体并显示下一个

这样做会更容易产生尽可能多的问题。

非常感谢。

Answer 1

我建议查看HTML类系统。因为您可以将一个类分配给多个项。然后只创建一个脚本，而不是调用onclick javascript事件。

我知道您请求了javascript，但是您标记了JQuery，我觉得JQuery脚本会为您提供更好的服务，我建议您这样做。用Javascript做这件事可能会变得非常冗长和复杂。

HTML

<div id="Q1">Hello There<br/>
    <div class = "Q1 correct choice"><input type="button"/>Hi</div>
    <div class = "Q1 wrong choice"><input type="button"/>Bye</div>
    <div class = "Q1 wrong choice"><input type="button"/>Thanks</div>
</div>
<div id="Q1_Correct" style="display: none;">You are correct</div>
<div id="Q1_Wrong" style="display: none;">You are wrong</div>

还可以设置要显示的通用正确/错误消息。

现在，使用JQuery可能是最简单的.就像在这个小提琴：http://jsfiddle.net/p5YY4/1/ (它不完美，但一些造型应该解决一些点击问题.但我想你能得到要点)

JQuery

$('.choice').on('click', function() {
    var parent = $(this).parent().attr('id');
    if($(this).hasClass('correct')){
        $('.choice').hide();
        var response = "#" + parent + "_Correct";
        $(response).show();
    }
    if($(this).hasClass('wrong')){
        $('.choice').hide();
        var response = "#" + parent + "_Wrong";
        $(response).show();
    }
});

如果你对此有任何疑问，请告诉我。

要使脚本原生于一个文档，需要设置以下内容才能使其正常工作：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
        //The script I have already provided should go here
   });
</script>

您还可以创建一个单独的文档，并调用它，比如quizWorker.js，然后使用我刚才说过的相同的布局(在js文件中，我也会将脚本放在$(document).ready函数中)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="quizWorker.js"></script>