`
tanglong8848
  • 浏览: 72938 次
  • 性别: 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>

分享到:
评论

相关推荐

    在线考试答题页面模板

    在线考试答题页面模板是用于创建和实施在线教育与评估的重要工具。这种模板设计的主要目标是为学生或参与者提供一个友好的界面,使他们能够轻松地完成考试或测验。下面将详细探讨在线考试答题页面模板的关键组成部分...

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

    快答答题手机app页面模板源码是一款基于HTML5技术构建的移动端应用页面模板,它集成了优秀的CSS样式和前端框架,适用于快速开发答题类应用程序。这个模板设计精美,旨在为用户提供流畅、直观的互动体验。下面我们将...

    答题卡模板制作,word答题卡模板

    2. **自定义设置**:答题卡插件通常允许用户根据实际需要定制答题卡的样式和布局。例如,你可以设置题目数量、每页显示的题目数、题目类型(单选、多选)以及填涂方式等。 3. **模板设计**:在插件提供的界面上,...

    jquery微信手机端答题卡特效_html5选择答题效果带图文并茂版式

    2. `style` 文件夹:包含了项目的CSS样式文件,可能有多个CSS文件分别管理不同部分的样式,比如全局样式、组件样式等。 3. `images` 文件夹:存储了答题过程中使用的图片资源,如题目图片、图标等。 4. `js` 文件夹...

    在线考试答题页面模板 2.zip

    在线考试答题页面模板是Web开发中的一个重要组成部分,尤其在教育、培训和企业考核等领域广泛应用。这个"在线考试答题页面模板 2.zip"文件显然包含了设计和实现一个功能完备的在线答题系统的网页元素和代码资源。...

    答题测试游戏模板

    【标题】:“答题测试游戏模板”是一个以答题和测试为主题的网页小游戏,专为移动端设计,适合初学者了解和学习JavaScript编程。 【描述】:这款小游戏是针对那些刚刚接触JavaScript的新手开发者而创建的,旨在通过...

    远程教育在线考试答题页面模板

    远程教育在线考试答题页面模板是一种常见的在线学习平台组件,它为开发者提供了构建高效、互动的考试环境的基础。这个模板基于jQuery-1.11.3.min.js库,这是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理...

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

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

    答题卡制作word插件

    这类插件通常具备丰富的模板库,用户可以选择适合的答题卡样式,并能自定义题目数量、选项设置、排版格式等。它简化了传统手动制作答题卡的复杂过程,提高了教育和考试组织者的办公效率。 【描述】在描述中提到的...

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

    考生应根据实际考试的答题卡样式来选择,以保证模拟考试与真实考试的一致性。 2. 考生需要熟悉电子版答题卡的操作方法。了解如何在电子版答题卡上选择题目、标记和填写答案,以及如何保存答题记录和查看答题分析,...

    PMP答题卡,供模拟测试用

    PMP答题卡。方便模拟用

    钢笔写字答题ppt模板.ppt

    【标题】"钢笔写字答题ppt模板.ppt"所代表的知识点主要集中在创建高效、专业且具有视觉吸引力的PowerPoint演示文稿上,特别适用于教育和考试场景。在这个模板中,设计者强调了学生的答题过程,以及使用钢笔书写的...

    答题卡制作插件

    此外,插件支持扫描已有的标准答题卡模板,通过数字化的方式,使教师能够快速复制模板,避免了手动设计的繁琐步骤。 该插件的另一个亮点是其便捷性。教师只需输入题目和选项,插件就能自动生成相应的答题卡样式,...

    纯H5答题游戏H5答题小游戏

    CSS3则在样式设计上带来了更多可能性,如动画(animations)、过渡(transitions)和多列布局(multi-column layout)。而JavaScript作为客户端脚本语言,通过AJAX异步数据交互、Web Storage本地存储以及Web Workers...

    vue 在线答题卡制作

    9. **样式设计**: 使用CSS预处理器如Sass或Less,或者使用Vue的 scoped CSS 来美化答题卡界面,使其更具吸引力和易用性。 10. **测试与部署**: 在开发过程中,使用Jest或Mocha进行单元测试和集成测试,确保功能...

    50套个人主页模板

    模板中的CSS文件包含了预先定义的颜色方案、字体样式、按钮、表单元素等,使得设计看起来专业且统一。 3. **切图**:切图是指将设计稿按照网页元素进行切割,生成不同的图片资源,用于网页的背景、图标等。这些图片...

    h5端趣味答题源码(thinkphp).rar

    4. **公共文件**(如public):存放静态资源,如CSS样式表、JavaScript脚本和图片。 5. **配置文件**(如config):存储应用的配置信息,如数据库连接、路由设置等。 6. **路由文件**(如route.php):定义应用的URL...

    前端layui带进度的答题效果

    本项目“前端layui带进度的答题效果”正是利用layui的强大功能,实现了一个具有进度条和弹窗结果显示的答题功能。下面将详细介绍这个功能的实现以及layui的核心知识点。 首先,layui的进度条组件(layui-progress)...

    答题卡制作软件及详细教程

    - **调整样式**:根据需要修改答题卡的样式,包括边距、行距、字体、颜色等。 - **插入条形码/二维码**:使用插件功能生成考生唯一的条形码或二维码,并放置在合适位置。 - **预览与打印**:检查无误后,进行预览...

    最新即兴评述话题及答题示例-word版.zip

    很抱歉,根据您给出的信息,这个压缩包"最新即兴评述话题及答题示例-word版.zip"似乎包含了关于即兴评述的话题和答题示例,但这些内容并不属于IT行业的专业知识点。即兴评述通常与语言表达、公共演讲或教育训练相关...

Global site tag (gtag.js) - Google Analytics