`
tanglong8848
  • 浏览: 66794 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

简单的答题模板样式

 
阅读更多 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  
    <title>answer</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<style type="text/css"> 

body{
font-size:12px;
background-color:#fff;
}
 
.main{
 width:100%;
}
 
.top h4{
width:100%;
background-color: #A3CBE0;
border:1px solid #73AFD0;
position:fixed;
left:0px;
top:0px;
}
 

.answer_list {
margin-top:0px;
background-color:#E0EEF5;
border-bottom:1px dashed #73AFD0;
color:#000000;
position: static;
width:auto;
height:auto;
}

.answer_list2 {
background-color:#FFFFFF;
border-bottom:1px dashed #73AFD0;
color:#000000;
position: static;
width:auto;
height:auto;
}



.px_content{
margin-left:50px;
margin-right:50px;
}

.answer_foot{
margin-top:10px;
margin-left:10px;
margin-right:10px;
}

.answer_foot_left{
float:left;
}
.answer_foot_right{
float:right;
}

.px_tm{
 font-size:14px;
 color:#22536A;
 padding:3px;
}

</style>
 </head>
  
  <body>
   <div class="main">
   <form action="do_answer.jsp" name="form1" method="post">
     <div class="top"><h4> 题目</h4></div>
     
    <div id="px_answer_1"  style="display:none">
     <div class="answer_list">
       <div class="px_content">
        <span class="px_tm">1、第一题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     
   
     <div class="answer_list2">
       <div class="px_content">
        <span class="px_tm">2、第一题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     
      <div class="answer_list">
       <div class="px_content">
        <span class="px_tm">3、第一题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     </div>
     
   
   
   
   
    <div id="px_answer_2" style="display:none">
     <div class="answer_list">
       <div class="px_content">
        <span class="px_tm">1、第二题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     
   
     <div class="answer_list2">
       <div class="px_content">
        <span class="px_tm">2、第二题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     
      <div class="answer_list">
       <div class="px_content">
        <span class="px_tm">3、第二题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     </div>
   
   
    <div id="px_answer_3" style="display:none">
     <div class="answer_list">
       <div class="px_content">
        <span class="px_tm">1、第三题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     
   
     <div class="answer_list2">
       <div class="px_content">
        <span class="px_tm">2、第三题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     
      <div class="answer_list">
       <div class="px_content">
        <span class="px_tm">3、第三题题目</span><br/>
         A.<input type="radio" name="1_a" value="a" />选择a  <br/>
         B.<input type="radio" name="1_a" value="a" />选择b  <br/>
         C.<input type="radio" name="1_a" value="a" />选择c  <br/>
         D.<input type="radio" name="1_a" value="a" />选择d  <br/>
        </div>
     </div>
     
     </div>
   
   
   
   
   
   
     
     
     <div class="answer_foot">
      <div class="answer_foot_left">
      <span id="px_up">
      <a href="javascript:goto_page('up',-1);">
      <img style="cursor:hand" border="0" src="images/px_back.gif" />
      </a>
      </span>
      </div>
      <div class="answer_foot_right">
       <span id="px_next">
        <a href="javascript:goto_page('next',1);">
       <img style="cursor:hand"  border="0" src="images/px_next.gif" />
        </a>
      </span>
       <span id="px_submit" style="display:none">
        <a href="javascript:chkform()"><img style="cursor:hand"  border="0" src="images/px_submit.png" /></a>
       </span>
      </div>
    </div>
    </form>
   </div>
  
<script type="text/javascript">
page=1;
function sub(){
 if(chkform()){
 document.form1.submit();
 }
}
function chkform(){


 return true;
}

function goto_page(name,id){
  //alert("page:"+page);
  
  
  if(name=="next"){
    
    //alert(page);
    document.getElementById("px_answer_"+(page+1)).style.display="";
    document.getElementById("px_answer_"+page).style.display="none";
    document.getElementById("px_up").style.display="";
    page=page+1;
    //隐藏next 显示提交 
   // document.getElementById("px_next").style.display="none";
   // document.getElementById("px_submit").style.display="";
  }
  
  if(name=="up"){
   //alert(page);
    document.getElementById("px_answer_"+(page-1)).style.display="";
    document.getElementById("px_answer_"+page).style.display="none";
    page=page-1;
  }
  
  
  if(page==1){
    document.getElementById("px_up").style.display="none";
  }
  
}

function loading_page(){
 document.getElementById("px_up").style.display="none";
 document.getElementById("px_answer_1").style.display="";
}
loading_page();

</script>  
  
   
  </body>
</html>

分享到：
| javascript实现select中option的顺序上下移 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    在线考试答题页面模板

    模拟在线考试答题页面模板，考题静态页面展示，单选和多选

    快答答题手机app页面模板源码

    使用HTML5技术，开发的实用的快答答题手机app页面模板源码；非常漂亮的CSS样式，HTML静态页面，前端框架，可供提取、复用。。。。现在分享给大家，仅供大家参考学习之用；

    软考答题卡初级中级高级含三个级别考试选择主观论文可打印

    空白软考答题卡的标准格式。可提前适应考试节奏。 很多人走出校园后，都没有填写答题卡的习惯，经常因为疏忽大意而扣分。 答题卡第一卷选择题，要使用2B铅笔填涂； 其余第二、三卷主观题或论文题，要使用0.5毫米黑色...

    新课标高考英语答题卡模板.docx

    2019高考英语答题卡样式（图）整理如下。 　英语科目答题卡样式 高考注意事项 　新东方在线推出了48道题测出最适合你报考的大学专业 参考适合你填报的大学专业。 估分选大学，通过大数据，选出适合你报考的大学...

    PMP答题卡，供模拟测试用

    PMP答题卡。方便模拟用

    行测答题卡(电子版)A4两份.pdf

    行测答题卡(电子版)A4两份.pdf

    50套个人主页模板

    50套个人主页模板，包含页面效果，CSS样式和切图

    头脑王者答题小程序demo.zip

    “微信答题小程序（仿头脑王者源码）在线教育考试pk答题小程序”是石家庄晟讯网络科技有限公司自主开发的一款专业性的答题小程序（软著登记号：4078210号），主要功能有：每日签到、...拥有多套样式模板供用户选择。

    微信答题小程序仿头脑王者源码demo

    “微信答题小程序（仿头脑王者源码）在线教育考试pk答题小程序”是石家庄晟讯网络科技有限公司自主开发的一款专业性的答题小程序（软著登记号：4078210号），主要功能有：每日签到、...拥有多套样式模板供用户选择。

    答答星球微信答题小程序头脑王者源码带后台手机app开发排位pk

    微信答题小程序仿头脑王者源码是一款专业性的答题小程序，(软著登记号：4078210号)主要功能有：每日签到、排位赛、好友PK、每日答题、大奖赛，群比赛3V3 5V5以及道具商店等。...拥有多套样式模板供用户选择。 APP

    （已更新）【疯狂诗词大会小程序2.0】功能模块+前端+诗词答题小程序+内置数千道题目+开箱即用

    源码简介与安装说明： 模块介绍： 诗词答题小程序，支持单项选择题、文字线索题、看图猜诗词、读诗句猜谜等题目类型。 内置数千道题目，开箱即用。随机出题，先易后难。...优化答题正确提示页面样式

    【疯狂诗词大会小程序2.0】功能模块 前端 诗词答题小程序 内置数千道题目 开箱即用.zip

    源码简介与安装说明： 模块介绍： 诗词答题小程序，支持单项选择题、文字线索题、看图猜诗词、读诗句猜谜等题目类型。 内置数千道题目，开箱即用。随机出题，先易后难。...优化答题正确提示页面样式

    在线考试模版静态页面

    支持单选多选的答题样式，写好的js，点题目自动聚焦，带有计时器

    rhVproc.rar

    答答星球微信答题小程序头脑王者源码带后台手机app开发排位pk是石家庄晟讯网络科技有限公司自主开发的一款专业性的答题小程序，主要功能有：每日签到、排位赛、好友PK、每日答题、大奖...拥有多套样式模板供用户选择。

    旅游知识竞赛PPT下载.rar

    这是2011年第二届园林文化节旅游知识竞赛决赛PPT试卷； 就PPT制作而言，还是相当有个性的。...感觉：竞赛，试卷，试题，答题，卷轴，圣旨，霸气，个性，动态幻灯片动画，旅游PPT模板，优秀PPT下载，.PPT格式；

    web版 在线考试模版静态页面

    web版 在线考试模版静态页面。 支持单选多选的答题样式，写好的js，点题目自动聚焦，带有计时器 HTML JS 单选 多选 计时器

    H5+canvas+js实现连线题

    根据canvas画布工具生成连线题样式及取值回调等功能，实现纵向题连线和横向题连线两个模板

    基于jQuery的试卷自动排版系统实现代码

    管理员能够改变试卷的样式（字体、颜色、行距、页面边距，像字处理软件一样……），题目之间可以插入一些说明性的文字（比如告知答题者作答的须知等等）。题目提干、选择题的选项、说明文字可以包含多媒体信息（文字...

Magicbox
Global site tag (gtag.js) - Google Analytics