js+html的简单在线做选择题

第一步：新建js文件将下面文件复制到文件中保存。

第二步：新建html文件将代码导入html文件中保存，最后运行就可以看到结果了，目前只有微软的ie、edge浏览器可以运行，谷歌不太支持运行结果。

.js文件

function scorequiz(form) {
    
      
list=0;		 
			 switch (form.Q1.value){
    
    
			 	case '*':
			 	list++;
			 		break;
			 	case '**':
			 	list=list+2;
			 		break;
			 	case '***':
			 	list=list+3;
			 		break;
			 	case '****':
			 	list=list+5;
			 }
	 		 switch (form.Q2.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q3.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q4.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q5.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q6.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q7.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q8.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q9.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q10.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q11.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q12.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q13.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q14.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q15.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	  		 switch (form.Q16.value){
    
    
	  		 	case '*':
	  		 	list++;
	  		 		break;
	  		 	case '**':
	  		 	list=list+2;
	  		 		break;
	  		 	case '***':
	  		 	list=list+3;
	  		 		break;
	  		 	case '****':
	  		 	list=list+5;
	  		 }
	  		 switch (form.Q17.value){
    
    
	  		 	case '*':
	  		 	list++;
	  		 		break;
	  		 	case '**':
	  		 	list=list+2;
	  		 		break;
	  		 	case '***':
	  		 	list=list+3;
	  		 		break;
	  		 	case '****':
	  		 	list=list+5;
	  		 }
	  		 switch (form.Q18.value){
    
    
	  		 	case '*':
	  		 	list++;
	  		 		break;
	  		 	case '**':
	  		 	list=list+2;
	  		 		break;
	  		 	case '***':
	  		 	list=list+3;
	  		 		break;
	  		 	case '****':
	  		 	list=list+5;
	  		 }
	 		 switch (form.Q19.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
	 		 switch (form.Q20.value){
    
    
	 		 	case '*':
	 		 	list++;
	 		 		break;
	 		 	case '**':
	 		 	list=list+2;
	 		 		break;
	 		 	case '***':
	 		 	list=list+3;
	 		 		break;
	 		 	case '****':
	 		 	list=list+5;
	 		 }
}
    form.SCORE.value =eval(list)
}

.html文件

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="${pageContext.request.contextPath}/views/js/testJS.js"></script>
<title>初步评判</title>
</head>
<body>
	<script type="text/javascript" src="js/testJS.js"></script>
	<center>
  		<font size="6" color="green"><b>详细版</b></font>
        <h1>初步了解您对本课程的认识程度</h1>
        <h3 style="color:red;">请务必认真作答</h3>
  	</center><br>
<table width="75%" border="0" align="center">
  <tr>
    <td> 
      <form  onLoad="clearquiz(this.form)">
        1. 数据结构概念：  
        <ol>
          <input type="radio" name="Q1" value="A" onClick=Q1.value="*">
          没学过<br>
          <input type="radio" name="Q1" value="B" onClick=Q1.value="**">
          略懂一点<br>
          <input type="radio" name="Q1" value="C" onClick=Q1.value="***">
          学过还算熟悉<br>
		  <input type="radio" name="Q1" value="D" onClick=Q1.value="****">
		  精通<br>
        </ol>
        2. 数据结构基本概念和术语。   
        <ol>
           <input type="radio"name="Q2" value="A" onClick=Q2.value="*">
          没学过<br>
          <input type="radio" name="Q2" value="B" onClick=Q2.value="**">
          略懂一点<br>
          <input type="radio" name="Q2" value="C" onClick=Q2.value="***">
          学过还算熟悉<br>
          <input type="radio" name="Q2" value="D" onClick=Q2.value="****">
          精通<br> 
        </ol>
        3. 抽象数据类型的表示与实现：
        <ol>
           <input type="radio" name="Q3" value="A" onClick=Q3.value="*">
          没学过<br>
          <input type="radio" name="Q3" value="B" onClick=Q3.value="**">
          略懂一点<br>
          <input type="radio" name="Q3" value="C" onClick=Q3.value="***">
          学过还算熟悉<br>
          <input type="radio" name="Q3" value="D" onClick=Q3.value="****">
          精通<br>
        </ol>
        4. 算法和算法分析：  
        <ol>
          <input type="radio" name="Q4" value="A" onClick=Q4.value="*">
         没学过<br>
         <input type="radio" name="Q4" value="B" onClick=Q4.value="**">
         略懂一点<br>
         <input type="radio" name="Q4" value="C" onClick=Q4.value="***">
         学过还算熟悉<br>
         <input type="radio" name="Q4" value="D" onClick=Q4.value="****">
         精通<br>
        </ol>
        5. 对算法的设计和效率、算法存储空间的需求的了解：
        <ol>
          <input type="radio" name="Q5" value="A" onClick=Q5.value="*">
         没学过<br>
         <input type="radio" name="Q5" value="B" onClick=Q5.value="**">
         略懂一点<br>
         <input type="radio" name="Q5" value="C" onClick=Q5.value="***">
         学过还算熟悉<br>
         <input type="radio" name="Q5" value="D" onClick=Q5.value="****">
         精通<br>
        </ol>
        6. 线性表的类型定义：  
        <ol>
           <input type="radio" name="Q6" value="A" onClick=Q6.value="*">
          没学过<br>
          <input type="radio" name="Q6" value="B" onClick=Q6.value="**">
          略懂一点<br>
          <input type="radio" name="Q6" value="C" onClick=Q6.value="***">
          学过还算熟悉<br>
          <input type="radio" name="Q6" value="D" onClick=Q6.value="****">
          精通<br>
        </ol>
        7. 线性表的顺序表示实现和链式表示实现：   
        <ol>
          <input type="radio" name="Q7" value="A" onClick=Q7.value="*">
         没学过<br>
         <input type="radio" name="Q7" value="B" onClick=Q7.value="**">
         略懂一点<br>
         <input type="radio" name="Q7" value="C" onClick=Q7.value="***">
         学过还算熟悉<br>
         <input type="radio" name="Q7" value="D" onClick=Q7.value="****">
         精通<br>
        </ol>
        8. 对链式表示里面的线性、循环、双向链表的了解：   
        <ol>
            <input type="radio" name="Q8"value="A" onClick=Q8.value="*">
          没学过<br>
          <input type="radio" name="Q8" value="B" onClick=Q8.value="**">
          略懂一点<br>
          <input type="radio" name="Q8" value="C" onClick=Q8.value="***">
          学过还算熟悉<br>
          <input type="radio" name="Q8" value="D" onClick=Q8.value="****">
          精通<br>
        </ol>
        9.类型栈和类型队列的定义 ：   
        <ol>
            <input type="radio" name="Q9"value="A" onClick=Q9.value="*">
          没学过<br>
          <input type="radio" name="Q9" value="B" onClick=Q9.value="**">
          略懂一点<br>
          <input type="radio" name="Q9" value="C" onClick=Q9.value="***">
          学过还算熟悉<br>
          <input type="radio" name="Q9" value="D" onClick=Q9.value="****">
          精通<br>
        </ol>
        10. 栈、队列的表示和实现：
        <ol>
          <input type="radio" name="Q10"value="A" onClick=Q10.value="*">
        没学过<br>
        <input type="radio" name="Q10" value="B" onClick=Q10.value="**">
        略懂一点<br>
        <input type="radio" name="Q10" value="C" onClick=Q10.value="***">
        学过还算熟悉<br>
        <input type="radio" name="Q10" value="D" onClick=Q10.value="****">
        精通<br>
        </ol>
		11.对栈的应用举例、栈与递归的实现的了解 ：   
		<ol>
		    <input type="radio" name="Q11"value="A" onClick=Q11.value="*">
		  没学过<br>
		  <input type="radio" name="Q11" value="B" onClick=Q11.value="**">
		  略懂一点<br>
		  <input type="radio" name="Q11" value="C" onClick=Q11.value="***">
		  学过还算熟悉<br>
		  <input type="radio" name="Q11" value="D" onClick=Q11.value="****">
		  精通<br>
		</ol>
		12.串类型的定义、表示和实现 ：   
		<ol>
		    <input type="radio" name="Q12"value="A" onClick=Q12.value="*">
		  没学过<br>
		  <input type="radio" name="Q12" value="B" onClick=Q12.value="**">
		  略懂一点<br>
		  <input type="radio" name="Q12" value="C" onClick=Q12.value="***">
		  学过还算熟悉<br>
		  <input type="radio" name="Q12" value="D" onClick=Q12.value="****">
		  精通<br>
		</ol>
		13.对串的模式匹配算法和应用举例的了解 ：   
		<ol>
		    <input type="radio" name="Q13" value="A" onClick=Q13.value="*">
		  没学过<br>
		  <input type="radio" name="Q13" value="B" onClick=Q13.value="**">
		  略懂一点<br>
		  <input type="radio" name="Q13" value="C" onClick=Q13.value="***">
		  学过还算熟悉<br>
		  <input type="radio" name="Q13" value="D" onClick=Q13.value="****">
		  精通<br>
		</ol>
		14.对数组和广义表的了解 ：   
		<ol>
		   <input type="radio" name="Q14" value="A" onClick=Q14.value="*">
		  没学过<br>
		  <input type="radio" name="Q14" value="B" onClick=Q14.value="**">
		  略懂一点<br>
		  <input type="radio" name="Q14" value="C" onClick=Q14.value="***">
		  学过还算熟悉<br>
		  <input type="radio" name="Q14" value="D" onClick=Q14.value="****">
		  精通<br>
		</ol>
		15.对树、森林与二叉树基本定义和性质的了解：   
		<ol>
		    <input type="radio" name="Q15" value="A" onClick=Q15.value="*">
		  没学过<br>
		  <input type="radio" name="Q15" value="B" onClick=Q15.value="**">
		  略懂一点<br>
		  <input type="radio" name="Q15" value="C" onClick=Q15.value="***">
		  学过还算熟悉<br>
		  <input type="radio" name="Q15" value="D" onClick=Q15.value="****">
		  精通<br>
		</ol>
		16.对图定义和术语、存储结构的了解：   
		<ol>
		   <input type="radio" name="Q16" value="A" onClick=Q16.value="*">
		  没学过<br>
		  <input type="radio" name="Q16" value="B" onClick=Q16.value="**">
		  略懂一点<br>
		  <input type="radio" name="Q16" value="C" onClick=Q16.value="***">
		  学过还算熟悉<br>
		  <input type="radio" name="Q16" value="D" onClick=Q16.value="****">
		  精通<br>
		</ol>
		17.对图遍历、连通性、有向无环图的了解：   
		<ol>
		    <input type="radio" name="Q17" value="A" onClick=Q17.value="*">
		  没学过<br>
		  <input type="radio" name="Q17" value="B" onClick=Q17.value="**">
		  略懂一点<br>
		  <input type="radio" name="Q17" value="C" onClick=Q17.value="***">
		  学过还算熟悉<br>
		  <input type="radio" name="Q17" value="D" onClick=Q17.value="****">
		  精通<br>
		</ol>
		18.对动态存储管理的了解：   
		<ol>
		    <input type="radio" name="Q18" value="A" onClick=Q18.value="*">
		  没学过<br>
		  <input type="radio" name="Q18" value="B" onClick=Q18.value="**">
		  略懂一点<br>
		  <input type="radio" name="Q18" value="C" onClick=Q18.value="***">
		  学过还算熟悉<br>
		  <input type="radio" name="Q18" value="D" onClick=Q18.value="****">
		  精通<br>
		</ol>
		19.对哈希表、动态查找、静态查找的了解：   
		<ol>
		  <input type="radio" name="Q19" value="A" onClick=Q19.value="*">
		  没学过<br>
		  <input type="radio" name="Q19" value="B" onClick=Q19.value="**">
		  略懂一点<br>
		  <input type="radio" name="Q19" value="C" onClick=Q19.value="***">
		  学过还算熟悉<br>
		  <input type="radio" name="Q19" value="D" onClick=Q19.value="****">
		  精通<br>
		</ol>
		20.对下面算法中了解几种，递归、排序、二分查找、搜索、哈希算法、贪心算法、
分治算法、回溯算法、动态规划、字符串匹配算法：   
		<ol>
		  <input type="radio" name="Q20" value="A" onClick=Q20.value="*">
		  了解0-2个<br>
		  <input type="radio" name="Q20" value="B" onClick=Q20.value="**">
		  了解3-5个<br>
		  <input type="radio" name="Q20" value="C" onClick=Q20.value="***">
		  了解5-8个<br>
		  <input type="radio" name="Q20" value="D" onClick=Q20.value="****">
		  全了解<br>
		</ol>
        <hr>
		<br>
		你的考试成绩：   
		<input  name="SCORE" type="text" class="pt9" style="color: red;">
		
<input type="submit" id="submitBtn" style="display: none;">
		<br><br>
        <input type="button" value="开始评分" onClick=scorequiz(this.form)   class="pt9">
        <input type="reset" name="reset" value="重新测试" onClick=clearquiz(this.form) class="pt9">  
        <input type="button" name="reset" value="给我推荐合适的学习图谱"  class="pt9">  
	    <br><br><br><br><br><br>
      </form>
</body>
</html>