<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=
1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.right {
width: 4
00px;
height:
100%;
position: fixed;
right: 0;
top: 0;
background
-color: rgba(0, 0, 0, 0
.1);
}
.right>
.head>div {
float: left;
width: 50%;
text
-align: center;
height: 40px;
line
-height: 40px;
background
-color: #389fc3;
color: white;
}
.right>
.head>
.time {
background
-color: white;
color: red;
}
.right>
.head,
.right>
.title,
.right>
.content {
width: 280px;
border:
1px solid #ccc;
}
.right>
.title>span {
font
-size:
12px;
display: inline
-block;
width: 50%;
text
-align: center;
height: 40px;
line
-height: 40px;
}
.right>
.title>span:first
-child {
font
-size:
14px;
font
-weight: 5
00;
}
.right>
.content {
list
-style: none;
margin: 0;
padding: 0 0 0 5px;
width: 275px;
}
.right>
.content>li {
width: 30px;
height: 30px;
border:
1px solid #ccc;
float: left;
font
-size:
12px;
text
-align: center;
line
-height: 30px;
margin: 5px;
}
.right>
.content>li>a {
display: block;
width:
100%;
height:
100%;
text
-decoration: none;
color: black;
}
.right>
.content>li
.active {
background
-color: #5d9cec;
color: white;
}
.bottom {
width: 9
00px;
position: fixed;
height: 40px;
bottom: 0;
right: 4
00px;
line
-height: 40px;
padding
-left: 20px;
background
-color: rgba(0, 0, 0, 0
.1);
}
.bottom>
.time {
color: red;
}
.bottom>
.submit {
width:
100px;
height:
100%;
float: right;
background
-color: #389fc3;
color: white;
text
-align: center;
cursor: pointer;
}
.clear::after {
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
opacity: 0;
}
.main {
margin
-top:
10px;
border:
1px solid #ccc;
width: 9
00px;
position: relative;
left:
110px;
}
.main
-title {
height: 40px;
line
-height: 40px;
}
.main
-title>span:first
-child {
padding: 0 20px;
}
.main
-title>
.main
-sorce {
display: inline
-block;
color: white;
font
-size:
12px;
background
-color: #389fc3;
border
-radius: 20px;
padding: 0
10px;
}
.main>
.main
-question {
list
-style: none;
margin: 0;
padding: 0;
}
.main>
.main
-question>li {
padding: 20px 0;
}
.main>
.main
-question
.left {
float: left;
width: 50px;
}
.main>
.main
-question
.left>span {
width: 30px;
height: 30px;
background
-color: #5d9cec;
display: inline
-block;
border
-radius: 30px;
text
-align: center;
color: white;
line
-height: 30px;
margin
-left:
10px;
}
.main>
.main
-question
.question {
float: left;
padding
-left: 30px;
width: 80%;
}
.main>
.main
-question
.question>
.line {
width:
100%;
border
-top: 0
.5px solid #
000;
}
.main>
.main
-question
.question>ul {
list
-style: none;
margin: 0;
padding: 0;
}
.main>
.main
-question
.question>ul>li {
padding: 5px;
}
.main>
.main
-question
.question>ul>li:hover {
background
-color: #eee;
}
.mask {
width:
100%;
height:
100%;
position: fixed;
background
-color: rgba(0, 0, 0, 0
.4);
z
-index: 999;
left: 0;
top: 0;
display: none;
}
.mask>
.score
-panel {
width: 50%;
height: 50%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background
-color: white;
}
</style>
</head>
<body>
<div class="main">
<div class="main
-title">
<span>单选题</span>
<span class="main
-sorce">共0题,合计0分</span>
</div>
<ul class="main
-question"></ul>
</div>
<div class="right">
<div class="head clear">
<div>答题卡</div>
<div class="time">
00:
00:
00</div>
</div>
<div class="title"><span>单选题</span><span class="num">共0道</span></div>
<ul class="content clear"></ul>
</div>
<div class="bottom clear">
<span class="time">
00:
00:
00</span>
<div class="submit">提交</div>
</div>
<div class="mask">
<div class="score
-panel"></div>
</div>
<script type="module">
// 获取JS文件
import getTime from "
../JS文件/time
.js";
import questionList from "
../JS文件/data
.js";
// 定义变量
var times, num, score, content, mainQuestion, submit, mask;
// 存储用户答案的对象
var answerList = {};
// 初始化函数
init();
// 创建函数
function init() {
// 获取所有的计时器
times = document
.querySelectorAll('
.time');
// 为每个计时器设置
120的倒计时
times
.forEach((item) => getTime(
120, item));
// 设置分数显示
setScore();
// 设置右侧题目导航
setRightContent();
//创建题目内容
createQuestion();
//绑定提交事件
submitAnswer();
}
// 设置分数信息
function setScore() {
// 获取题目数量和分数显示元素
num = document
.querySelector('
.num');
score = document
.querySelector('
.main
-sorce');
// 显示总题目数
num
.innerHTML = `共${questionList
.length}题`;
// 计算总分
var s = questionList
.reduce((value, item) => value + item
.score, 0);
// 显示总分信息
score
.innerHTML = `共${questionList
.length}题,合计${s}分`;
}
// 创建右侧题目导航
function setRightContent() {
// 获取导航容器
content = document
.querySelector('
.content');
// 生成题目导航链接
content
.innerHTML = questionList
.map((item, index) => {
// 为每个题目创建带锚点的链接
return `<li><a href='${index}'>${index +
1}</a></li>`;
})
.join('');
}
// 创建题目内容
function createQuestion() {
// 获取题目容器
mainQuestion = document
.querySelector('
.main
-question');
// 绑定题目点击事件委托
mainQuestion
.addEventListener('click', questionHandler);
// 生成所有题目渲染
mainQuestion
.innerHTML = questionList
.map((item, index) => {
return `
<li class="clear" id='${index}'>
<div class="left"><span>${index +
1}</span></div>
<div class="question">
<div>${item
.question}</div>
<div class="line"></div>
<ul>
${item
.options
.map((t, ind) => {
// 生成选项(A/B/C/D)
const optionChar = String
.fromCharCode(65 + ind);
return `<li>
<input type="radio" name="${index}" data='${optionChar}'/>
${optionChar + "
." + t}
</li>`;
})
.join("")}
</ul>
</div>
</li>
`;
})
.join("");
}
// 处理题目选择
function questionHandler(e) {
// 只处理input元素的点击
if (e
.target
.ondeName !== 'INPUT') return
// 获取题目索引
const name = e
.target
.name;
// 获取选项值
const data = e
.target
.getAttribute('data');
// 存储答案
answerList[name] = data;
}
//提交功能初始化
function submitAnswer() {
//获取提交按钮和遮罩层
submit = document
.querySelector('
.submit');
mask = document
.querySelector('
.mask');
// 绑定提交事件
submit
.addEventListener('click', clickHandler);
// 绑定遮罩层点击事件
mask
.addEventListener('click', maskHiddenHandler);
}
// 提交按钮点击处理
function clickHandler(e) {
// 显示分数面板
mask
.style
.dispaly = 'block';
document
.querySelector("
.score
-panel")
.innerHTML = `
您一共得了${Object
.keys(answerList)
.reduce((value, key) => {
if (questionList[Number(key)]
.result === answerList[key])
value += questionList[Number(key)]
.score;
return value;
}, 0)}分
`;
}
function maskHiddenHandler(e) {
// 关闭分数面板
mask
.style
.display = 'none';
}
</script>
</body>
</html>
扫一扫
2778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
