前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >html+js开发模拟考试在线评分系统

html+js开发模拟考试在线评分系统

作者头像
爱知汇
发布于 2020-10-23 12:13:13
3.5K0
发布于 2020-10-23 12:13:13
举报
文章被收录于专栏：网页开发/美化网页开发/美化网页开发/美化

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5育婴师职业资格模拟考试&在线考试自动评分</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="generator" content="bd-mobcard">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="keywords" content="HTML5,职业技能,育婴师,水平测试,在线考试,自动评分,系统" />
<meta name="description" content="HTML5育婴师职业资格模拟考试&在线考试自动评分。" /> 
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>      
<script type="text/javascript" src="js/score.js" ></script>
</head>
<body>
 
<div class="topbox" id='title'>
<img src="img/bg.jpg" class="bg"/>
<div class="tb_txt1"><span id="ft">已有<em>13152</em>人参与考试</span></div>
<div class="con">
<p class="test_p">不准携带通讯工具，</br>不准交头接耳，</br>一经发现取消考试成绩，</br>并终生禁止再次参与本考试</p>
<a id="begin_2" class="test_a"><img src="img/btn.png" alt=""/></a>
</div>
</div>
<div class="gztt" id='notice'>   
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt=""  style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item"><div class="tit">1、婴儿的生长发育是一个连续的过程，但各系统发育不平衡，最早发育的系统是( )。</div>
<div class="item_con">
<ul>
<li><input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span>呼吸系统</li>
<li><input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span>神经系统</li>
<li><input type="radio" name="test1" id="" class="rad" value='C'><span>C</span>生殖系统</li>
<li class="bn"><input type="radio" name="test1" id="" class="rad" value='D'/><span>D</span>消化系统</li>
</ul>
<input type="hidden" value="B">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt=""  style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item"><div class="tit">2、下列对形成龋齿的原因描述不正确的是( )。</div>
<div class="item_con">
<ul>
<li><input type="radio" name="test2" id="" class="rad" value='A' /><span>A</span>乳牙较小</li>
<li><input type="radio" name="test2" id="" class="rad" value='B'/><span>B</span>乳牙牙釉质薄</li>
<li><input type="radio" name="test2" id="" class="rad" value='C'><span>C</span>牙本质较松脆</li>
<li class="bn"><input type="radio" name="test2" id="" class="rad" value='D'/><span>D</span>容易被腐蚀</li>
</ul>
<input type="hidden" value="A">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt=""  style="border:none;border-radius:0px;"/></div>
<div class="test_con"><div class="item"><div class="tit">
3、婴儿前囟和后囟的闭合时间是( )。
</div>
<div class="item_con">
<ul>
<li><input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span>前囟3个月左右，后囟12～18个月</li>
<li><input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span>后囟3个月左右，前囟12～18个月</li>
<li><input type="radio" name="test1" id="" class="rad" value='C'><span>C</span>前囟1岁左右，后囟6个月</li>
<li class="bn"><input type="radio" name="test1" id="" class="rad" value='D'/><span>D</span>后囟3个月左右，前囟24～30个月</li>
</ul>
<input type="hidden" value="B"></div></div></div></div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt=""  style="border:none;border-radius:0px;"/></div>
<div class="test_con"><div class="item"><div class="tit">4、下列关于婴儿大动作发展顺序的描述不正确的是( )。
</div>
<div class="item_con">
<ul>
<li><input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span>新生儿动作主要为自发性运动，无规律，不协调</li>
<li><input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span>1个月能俯卧位抬头片刻</li>
<li><input type="radio" name="test1" id="" class="rad" value='C'><span>C</span>6个月会翻身</li>
<li class="bn"><input type="radio" name="test1" id="" class="rad" value='D'/><span>D</span>4个月会爬</li>
</ul>
<input type="hidden" value="D"></div></div></div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt=""  style="border:none;border-radius:0px;"/></div>
<div class="test_con"><div class="item"><div class="tit">5、下列关于婴儿意志力发展的描述不正确的是( )。</div>
<div class="item_con">
<ul>
<li><input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span>新生儿没有意志力</li>
<li><input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span>运动能力的掌握和运动的目的性，与婴儿意志力的产生没有直接联系</li>
<li><input type="radio" name="test1" id="" class="rad" value='C'><span>C</span>婴儿的意志力水平极差，只处于萌芽状态</li>
<li class="bn"><input type="radio" name="test1" id="" class="rad" value='D'/><span>D</span>婴儿的行动有很大的冲动性</li>
</ul>
<input type="hidden" value="B"></div></div></div></div>
<div class="test end" id='level1'>
     <div class="score" ><img src="" alt=""/></div>
<div class="test_con">
<div class="answer_con">
<h1>呃呃 ，你完了</h1>
<p>
<span>详细分析：</span><br/>我很遗憾的告诉你，你现在的水平，还是离考场远一点吧。
</p>
</div>
</div>
</div>
<div class="test end" id='level2'>
       <div class="score"><img src="" alt=""/></div>
<div class="test_con">
<div class="answer_con">
<h1>加油，别放弃治疗</h1>
<p>
<span>详细分析：</span><br/>这个分数充分说明了，你对从事育婴师，还是有一些期待的。
</p>
</div>
</div>
</div>
<div class="test end" id='level3'>
       <div class="score" ><img src="" alt=""/></div>
<div class="test_con">
<div class="answer_con">
<h1>恭喜你，顺利通过考试了</h1>
<p>
<span>详细分析：</span><br/>做一名育婴师，你准备好了。
</p>
</div>
</div>
</div>
<div class="test end" id='level4' >
       <div class="score"><img src="" alt=""/></div>
<div class="test_con">
<div class="answer_con">
<h1>学霸，手下我的膝盖吧</h1>
<p>
<span>详细分析：</span><br/>考成这样，你是要秒杀出题老师么？
</p>
</div>
</div>
</div>
   <input type="hidden" name='sumScore' id='sumScore' value="0">
</body>
</html>

score.js 

$(function(){
//        alert(document.title);
//        $('#begin').click(function(){
//            $('#notice').css('display','none');
//            $('#title').css('display','none');
////            var leftPos = (typeof window.screenLeft == "number") ? window.screenTop : window.screenY;
////            window.moveTo(200,0)
//             // $("#notice").scrollTop(1000);
//        //   alert($("#notice").offset().top);
//             scrollOffset($("#notice").offset()); 
////            // jQuery 定位让body的scrollTop等于pos的top，就实现了滚动 
//            function scrollOffset(scroll_offset) { 
//            $("body,html").animate({ 
//            scrollTop: scroll_offset.top+1000
//            }, 0); 
//            } ;
//         window.scroll(20000,2000); //2000代表定位到这个页面距离顶端2000px;
//         location.href = "#notice";
//          $('.test:first').css('display','block');
////           alert($('.test:first').html());
//            
//        });
	$('#begin_2').click(function(){
	 
	   $('.topbox').css('display','none'); 
		$('.test:first').css('display','block'); 
	});
	 
	$('li').click(function(){
		$(this).addClass('on');
//            alert(   $(this).html());
		var select=$(this).children(':radio').val();
		var answer=$(this).parents('div').children(':hidden').val();
//           s alert($(this).children(':radio').val());
		var sumScore=$('#sumScore').val();
		if(select===answer){
			$('#sumScore').val(parseInt(sumScore)+1);
		}
//            alert( $(this).parents('.test').css('display'));
		$(this).parents('div').css('display','none');
		if( $(this).parents('div').next('div').hasClass('end')){
		   var score= $('#sumScore').val();
		   if(score<5){
			   var src="img/score/"+score*1+".png";
				 $('#level1 .score img').attr('src',src);
				$('#level1').css('display','block');
		   }else if(score<10){
				 var src="img/score/"+score*1+".png";
				 $('#level2 .score img').attr('src',src);
				 $('#level2').css('display','block');
		   }else if(score<15){
				 var src="img/score/"+score*1+".png";
				 $('#level3 .score img').attr('src',src);
				 $('#level3').css('display','block');
		   }else{ 
				 var src="img/score/"+score*1+".png";
				 $('#level4 .score img').attr('src',src);
				 $('#level4').css('display','block');
		   }
		   document.title="我在育婴师职业资格模拟考试中得到了"+score*1+"分，你能超过我吗?";
		   $('.guanzhu1').css('display','block');
//               alert(document.title);
		   
		}else{
			   $(this).parents('div').next('div').css('display','block');
		}
//            alert( $(this).parents('div').next('div').html());
	});
	
 $(':radio').click(function(){
		 $(this).parents('li').addClass('on');
//             alert( $(this).parents('li').html());
		var select=$(this).val();
		var answer=$(this).parents('div').children(':hidden').val();
		var sumScore=$('#sumScore').val();
		if(select===answer){
			$('#sumScore').val(parseInt(sumScore)+1);
		}
//            alert( $(this).parents('.test').css('display'));
		$(this).parents('div').css('display','none');
		if( $(this).parents('div').next('div').hasClass('end')){
		   var score= $('#sumScore').val();
		   if(score<5){
			   var src="img/score/"+score*1+".png";
				 $('#level1 .score img').attr('src',src);
				$('#level1').css('display','block');
		   }else if(score<10){
				 var src="img/score/"+score*1+".png";
				 $('#level2 .score img').attr('src',src);
				 $('#level2').css('display','block');
		   }else if(score<15){
				 var src="img/score/"+score*1+".png";
				 $('#level3 .score img').attr('src',src);
				 $('#level3').css('display','block');
		   }else{ 
				 var src="img/score/"+score*1+".png";
				 $('#level4 .score img').attr('src',src);
				 $('#level4').css('display','block');
		   }
		   
		}else{
			   $(this).parents('div').next('div').css('display','block');
		}
//            alert( $(this).parents('div').next('div').html());
	});
//        $('.ask').click(function(){
//            $(this).parents('div').css('display','none');
//            $(this).parents('div').next('div').css('display','block');
//            var select=$(this).parents('div').find(':radio:checked').val();
//            alert(select);
//        });
	   
		function WeiXinShareBtn() {
		 if (typeof WeixinJSBridge == "undefined") {
				 alert("请先通过微信搜索考试招聘信息平台，通过微信分享文章 :) ");
		 } else {
		 WeixinJSBridge.invoke('shareTimeline', {
		 "title": "育婴师职业资格模拟考试",
		 "link": "https://www.izhihui.top/ks/index.html",
		 "desc": "关注育婴师职业资格模拟考试",
		 "img_url": "/img/topimg.jpg"
		 });
		 }
		 }
		  $('.share').click(function(){
//                WeiXinShareBtn();

		   $('.share_b').css('display','block');
			 location.href = "#title";
		});
		
		$('.share_b').click(function(){
			$(this).css('display','none');
		});
		$('#close').click(function(){
		   $('.guanzhu1').css('display','none');
		});
	
})
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-10-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
html

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ，欢迎热爱写作的你一起参与！

html
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2024 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论