javascript - 在在线测验应用程序的页面上显示一个问题
问题描述
请我想用下一个和上一个按钮在我的测验应用程序的页面上显示一个问题。我能够做到这一点。我所做的是,我为每个问题添加了一个 ID。每个问题 ID 的初始值为 1。所以在下一个按钮功能中,我将每个问题的值增加 1。所以当单击下一个或上一个按钮时,它会增加或减少问题的 ID 1 和然后决定在页面上显示哪个问题。此外,如果问题 ID 为 1,则下一个按钮应显示并隐藏上一个按钮。但如果 ID 大于 1 或小于问题总数,则应显示下一个和上一个按钮。但是我现在面临的新挑战是当问题超过 10 时,它会在一个页面上显示两个问题并且没有显示完成按钮。完成按钮应该显示当前问题 ID(可能是任何值)是否等于我获取或想要显示的问题总数。例如,如果当前问题 ID 为 20,而我要显示的问题总数为 20,则应该显示完成按钮。否则它应该显示下一个和上一个。
This is my code
<form method="POST" role="form" id="form" action="result.php">
<?php
$number_of_question = 10;
$qryquestions="SELECT * FROM questions WHERE `course_title`='".$course_title."' ORDER BY RAND() LIMIT 10";
$qryquestionscheck=$conn->query($qryquestions);
$i = 1;
foreach ($qryquestionscheck as $row){
$question_id = $row['question_id'];
$questions = $row['questions'];
$optionA = $row['option_A'];
$optionB = $row['option_B'];
$optionC= $row['option_C'];
$optionD = $row['option_D'];
$correct_answer = $row['answer'];
$_SESSION['course_title'] = $course_title;
$question_rowcount = $qryquestionscheck->num_rows;
$remainder = $question_rowcount/$number_of_question;
$_SESSION['question_rowcount'] = $question_rowcount;
//echo $remainder; die();
?>
<?php if($i==1){?>
<div id='question<?php echo $i;?>' class='cont'>
<div class="form-group">
<label style="font-weight: normal; text-align: justify;" class="questions"><b><?php echo "Question" . " " . $counter++; ?></b> <?php echo $questions; ?></label><br>
<div id="quiz-options">
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" name="option[]" value="A"> <?php echo $optionA; ?>
</label><br>
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" name="option[]" value="B"> <?php echo $optionB; ?>
</label><br>
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" name="option[]" value="C"> <?php echo $optionC; ?>
</label><br>
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" name="option[]" value="D"> <?php echo $optionD; ?>
</label><br>
<input type="hidden" name="correct_answer[]" value="<?php echo $correct_answer; ?>">
<!-- CHANGED name to same "option[]", value to null and added class unchecked -->
<!--<input type="hidden" name="option[]" class="unchecked" value="null">-->
<button id='next<?php echo $i;?>' class='next btn btn-default pull-right' type='button' >Next</button>
</div>
</div>
</div>
<?php }elseif($i<$question_rowcount){?>
<div id='question<?php echo $i;?>' class='cont'>
<div class="form-group">
<label style="font-weight: normal; text-align: justify;" class="questions"><b><?php echo "Question" . " " . $counter++; ?></b> <?php echo $questions; ?></label><br>
<div id="quiz-options">
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" name="option[]" value="A"> <?php echo $optionA; ?>
</label><br>
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" name="option[]" value="B"> <?php echo $optionB; ?>
</label><br>
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" name="option[]" value="C"> <?php echo $optionC; ?>
</label><br>
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" name="option[]" value="D"> <?php echo $optionD; ?>
</label><br>
<input type="hidden" name="correct_answer[]" value="<?php echo $correct_answer; ?>">
<!-- CHANGED name to same "option[]", value to null and added class unchecked -->
<!--<input type="hidden" name="option[]" class="unchecked" value="null">-->
<br>
<button id='pre<?php echo $i;?>' class='previous btn btn-default' type='button'>Previous</button>
<button id='next<?php echo $i;?>' class='next btn btn-default pull-right' type='button' >Next</button>
</div>
</div>
</div>
<?php }elseif(( $remainder < 1 ) || ( $i == $number_of_question && $remainder == 1 ) ){?>
<div id='question<?php echo $i;?>' class='cont'>
<div class="form-group">
<label style="font-weight: normal; text-align: justify;" class="questions"><b><?php echo "Question" . " " . $counter++; ?></b> <?php echo $questions; ?></label><br>
<div id="quiz-options">
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" name="option[]" value="A"> <?php echo $optionA; ?>
</label><br>
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" name="option[]" value="B"> <?php echo $optionB; ?>
</label><br>
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" name="option[]" value="C"> <?php echo $optionC; ?>
</label><br>
<label style="font-weight: normal; cursor: pointer;">
<input type="checkbox" name="option[]" value="D"> <?php echo $optionD; ?>
</label><br>
<input type="hidden" name="correct_answer[]" value="<?php echo $correct_answer; ?>">
<!-- CHANGED name to same "option[]", value to null and added class unchecked -->
<!--<input type="hidden" name="option[]" class="unchecked" value="null">-->
<br>
<button id='pre<?php echo $i;?>' class='previous btn btn-default' type='button'>Previous</button>
<input class='btn btn-info pull-right' value="Finish & Submit" name="submit" type='submit'>
</div>
</div>
</div>
<?php }
/*$option_array = $_POST['option'];
$unanswered = 0;
if (in_array("null", $_POST['option'])){
$unanswered++;
}
$_SESSION['unanswered'] = $unanswered;
echo $unanswered = $_SESSION['unanswered']; die();*/
$i++;} ?>
</form>
This is my script code for the hiding and displaying
<script>
var total = parseInt(<?php echo $question_rowcount; ?>);
$('.cont').addClass('hide');
count=$('.questions').length;
$('#question'+1).removeClass('hide');
$(document).on('click','.next',function(){
element=$(this).attr('id');
$("input[type='submit']").hide();
last = parseInt(element.substr(element.length - 1));
if (total == last){
$("input[type='submit']").show();
}
nex=last + 1;
$('#question' + last).addClass('hide');
$('#question' + nex).removeClass('hide');
});
$(document).on('click','.previous',function(){
element=$(this).attr('id');
last = parseInt(element.substr(element.length - 1));
pre=last - 1;
$('#question' + last).addClass('hide');
$('#question' + pre).removeClass('hide');
});
</script>
解决方案
添加此 jQuery 代码:
<script>
var total = parseInt(<?php echo $question_rowcount; ?>);
$('.cont').addClass('hide');
count = $('.questions').length;
$('#question' + 1).removeClass('hide');
$(document).on('click', '.next', function () {
element = $(this).attr('id');
$("input[type='submit']").hide();
last = parseInt(element.substr(element.length - 1));
if (total == last) {
$("input[type='submit']").show();
}
nex = last + 1;
$('#question' + last).addClass('hide');
$('#question' + nex).removeClass('hide');
});
$(document).on('click', '.previous', function () {
element = $(this).attr('id');
last = parseInt(element.substr(element.length - 1));
pre = last - 1;
$('#question' + last).addClass('hide');
$('#question' + pre).removeClass('hide');
});
推荐阅读
- docker - 获取用于网络上 docker 容器的 IP 地址
- liquibase-hibernate - 从我的项目代码访问 http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-2.0.xsd 时出现 HTTP 403
- sql - 如何在 SQL 查询中添加具有大量对象的约束?
- android - 在 android 中使用 cognito 凭证提供程序的 Aws mqtt 连接
- python - 类在 Django 和 python 中没有对象错误
- ios - 在收到粘贴板内容更改通知后,我收到了很多崩溃
- java - 在spring webservice响应中设置xml响应头
- qt - 通过单击 QML 中的文本部分来发出信号
- java - Java中的字符到二进制到十六进制和向后
- ios - IOS NFC是否支持银行卡读取