HTML

Question

我知道有很多免费/付费测验系统，但没有一个可以自定义，特别是我需要在RTL方向。

无论如何，我制作了这个简单的剧本：fiddle

<!-- 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：如何在不添加所有ID的情况下隐藏所有错误答案（getElementByClassName不起作用）

2：不是为每个问题重新复制脚本，而是可以通过JavaScript在每种新表单中完成：

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

湾"wrong_btn"显示"wrong_note"并隐藏所有其他按钮

℃。 "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/（它不完美，但是一些造型应该解决一些点击问题......但我认为你可以得到要点）< / p>

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>

制作一个简单的测验系统，直接回答

1 个答案:

HTML

JQuery的