目录
『源码』html+css+js实现知识竞赛问答随机出题系统
Bpvank
2022年10月24日 17:53
收录于文集
共6篇

效果预览

两期视频

07:21
高端三剑客就能实现这么实用的随机出题系统！太赞了！html+css部分
1691
6
11:01
高端三剑客就能实现这么实用的随机出题系统！太赞了！Javascript部分
924
2

系统介绍

本系统可用于学校、企业、机构等举办知识问答竞赛活动时的出题系统，系统设计需求根据本人经验所得：

  1. 点击开始：随机出题（两种题型），题目晃动，开始按钮变暂停按钮。

  2. 参赛选手喊停，则点击暂停按钮，题目停止晃动。

  3. 点击答案：先公布第一题的答案，再次点击公布第二题的答案。

本系统按照以上需求进行设计与开发

技术层面

  1. 未涉及到数据库，数据结构对js小白来说会比较复杂。

  2. 代码冗余，但是数据可维护性强。

版权声明

本系统仅供学习，由原作者：Bpvank自主设计与开发，未经允许，禁止转发、商用

一、HTML文件：index.html

代码块
HTML
自动换行
复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【HTML+CSS】知识竞赛问答随机出题系统</title>
    <!-- LOGO -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.png" />
    <!-- CSS -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 背景装饰元素 -->
    <img src="img/element01.png" class="background_element01">
    <img src="img/element02.png" class="background_element02">
    <img src="img/element03.png" class="background_element03">

    <!-- 标题 -->
    <div class="titleBox">
        <h2>LOGO</h2>
        <h1>2022 知识竞赛问答随机出题系统</h1>
    </div>

    <!-- 主要内容 -->
    <div class="main">
        <!-- 标题 -->
        <h1 class="title">青春心向党，走进互联网</h1>
        <!-- 出题区 -->
        <div class="topicBox">
            <div class="content01">
                <!-- 党政爱国题 -->
                <h3>
                    <p>
                        <!-- 题型 -->
                        <span>【党政爱国题】</span>
                        <!-- 题目 -->
                        <span id="topic01">问题？</span>
                    </p>
                    <!-- 答案 -->
                    <p class="answer">
                        <span id="A1">A、</span>
                        <span id="B1">B、</span>
                        <span id="C1">C、</span>
                        <span id="D1">D、</span>
                    </p>
                </h3>
            </div>
            <!-- 互联网题 -->
            <div class="content02">
                <h3>
                    <p>
                        <!-- 题型 -->
                        <span>【互联网题】</span>
                        <!-- 题目 -->
                        <span id="topic02">问题？</span>
                    </p>
                    <!-- 答案 -->
                    <p class="answer">
                        <span id="A2">A、</span>
                        <span id="B2">B、</span>
                        <span id="C2">C、</span>
                        <span id="D2">D、</span>
                    </p>
                </h3>
            </div>
        </div>

        <!-- 开始、答案按钮 -->
        <div class="buttonBox">
            <input type="button" value="开始" id="begin">
            <input type="button" value="答案" id="answer" name="one">
        </div>

        <!-- 版权声明 -->
        <p>· 本系统仅供学习，由原作者：Bpvank自主设计与开发，未经允许，禁止转发、商用 ·</p>
    </div>

    <!-- JS -->
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>
复制成功

二、CSS文件：index.css

代码块
CSS
自动换行
复制代码
/* 清除内、外间距 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 添加背景图片 */
body{
    background: url(../img/background.png) no-repeat center top;
    background-size: cover;
    background-attachment: fixed;
    user-select: none;
}

/* 背景装饰元素 */
.background_element01{
    width: 10%;
    position: absolute;
    top: 150px;
    left: 50px;
    pointer-events: none;
}

.background_element02{
    width: 25%;
    position: absolute;
    right: 0;
    pointer-events: none;
}

.background_element03{
    width: 23%;
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* 标题、LOGO */
.titleBox{
    width: 100%;
    height: 100px;
    padding: 20px;
    margin-bottom: 20px;
}

.titleBox>h2{
    color: darkred;
}

.titleBox>h1{
    color: darkred;
    text-align: center;
    font-size: 40px;
}

/* 主要内容 */
.main{
    width: 65%;
    background: darkred;
    padding: 10px;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 3px 3px 0 goldenrod;
}

.main .title{
    color: white;
    text-align: center;
    line-height: 55px;
}

.main>p{
    font-size: 10px;
    color: white;
    text-align: center;
    letter-spacing: 2px;
}

.topicBox{
    width: 90%;
    height: 70%;
    margin: 10px auto;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    background: white;
    border-radius: 10px;
    padding: 20px;
    line-height: 40px;
    box-shadow: 3px 3px 0 goldenrod;
}

.topicBox>div{
    width: 100%;
    height: 200px;
}

.topicBox>div:nth-child(1){
    border-bottom: 3px solid darkred;
    margin-bottom: 20px;
}

/* 按钮样式 */
.buttonBox{
    width: 100%;
    text-align: center;
}

.buttonBox input{
    width: 200px;
    height: 50px;
    margin: 10px 20px;
    font-size: 28px;
    font-weight: bold;
    border-radius: 10px;
    outline: none;
    box-shadow: 3px 3px 0 rosybrown;
    color: darkred;
    border: 0px;
}

/* 答案样式 */
.answer span{
    margin-right: 30px;
    font-size: 23px;
}

/* 正确答案样式 */
.correct_answer{
    background: darkred;
    color: white;
}
复制成功

三、Javascript文件：index.js

小提示：代码演示只使用了三条数据，数据多一些效果会更好哦~

数据结构：

代码块
JavaScript
自动换行
复制代码
{
	topic: "", // 题目
	select: { // 答案选择
		A: "",
		B: "",
		C: "",
		D: ""
	},
	answer: "", // 正确答案
}
复制成功

代码：

代码块
JavaScript
自动换行
复制代码
// 党政爱国题库
var content01 = [{
    topic: "五四运动标志着中国（）？",
    select: {
        A: "A、封建主义的寿终正寝",
        B: "B、新民主主义革命的开端",
        C: "C、共产党走上历史舞台",
        D: "D、资产阶级革命的转变"
    },
    answer: "B",
},
{
    topic: "以下没有参加中国共产党第一次全国代表大会的是（）？",
    select: {
        A: "A、陈独秀",
        B: "B、毛泽东",
        C: "C、董必武",
        D: "D、李达"
    },
    answer: "A",
}, {
    topic: "1935年1月，中国中央政治局在长征途中举行（）？",
    select: {
        A: "A、遵义会议",
        B: "B、俄界会议",
        C: "C、洛川会议",
        D: "D、古田会议"
    },
    answer: "A",
}];

// 互联网题库
var content02 = [{
    topic: "下面哪一项的电子邮件链接是正确的（）？",
    select: {
        A: "A、xxx.com.cn",
        B: "B、xxx@.net",
        C: "C、xxx@com",
        D: "D、xxx@xxx.com"
    },
    answer: "D",
}, {
    topic: "在html中，用于定义表格列的标签是（）？",
    select: {
        A: "A、table",
        B: "B、boby",
        C: "C、td",
        D: "D、tr"
    },
    answer: "C",
}, {
    topic: "WWW是（）？",
    select: {
        A: "A、因特网",
        B: "B、万维网",
        C: "C、局域网",
        D: "D、外网"
    },
    answer: "B",
}];


// ----------------  以上为本系统的数据，只有三条数据，仅供演示  ----------------
// 数据结构分析：采用的是数组对象，数组中存储的是对象
/*
    {
        topic: "", // 题目
        select: { // 答案选择
            A: "",
            B: "",
            C: "",
            D: ""
        },
        answer: "", // 正确答案
    }
*/
// 记住此数据结构，后面代码中使用到不会进行介绍

// 查找（开始、答案）按钮
var begin = document.getElementById("begin"); // 开始
var answer = document.getElementById("answer"); // 答案

// 获取两个题区放题目的span标签
var topic01 = document.getElementById("topic01");
var topic02 = document.getElementById("topic02");

// 获取两个题区放答案的span标签
var A1 = document.getElementById("A1");
var B1 = document.getElementById("B1");
var C1 = document.getElementById("C1");
var D1 = document.getElementById("D1");
var A2 = document.getElementById("A2");
var B2 = document.getElementById("B2");
var C2 = document.getElementById("C2");
var D2 = document.getElementById("D2");

// 禁用答案按钮
answer.disabled = true;

// 点击开始按钮
begin.onclick = () => {
    // 当前按钮的value值为开始，则进行开始的一系列操作
    if (begin.value == '开始') {
        begin.value = '暂停';

        // 清除正确答案的样式  移除class
        A1.classList.remove("correct_answer");
        B1.classList.remove("correct_answer");
        C1.classList.remove("correct_answer");
        D1.classList.remove("correct_answer");
        A2.classList.remove("correct_answer");
        B2.classList.remove("correct_answer");
        C2.classList.remove("correct_answer");
        D2.classList.remove("correct_answer");

        // 判断数组中是否只剩最后一题，是的话则不用点击暂停就可以直接点击答案
        if (content01.length == 1 || content02.length == 1) {
            answer.disabled = false;
            begin.disabled = false;
        }

        let fn = () => {
            // 根据题库数组的长度获取随机数，有两个题库，两种题型
            var content01_index = parseInt(Math.random() * content01.length);
            var content02_index = parseInt(Math.random() * content02.length);

            // 1题区题目内容 = 党政爱国题库里面随机的一个题目
            topic01.innerText = content01[content01_index].topic;
            // 2题区题目内容 = 互联网题库里面随机的一个题目
            topic02.innerText = content02[content02_index].topic;

            // 1题区内容的答案
            A1.innerText = content01[content01_index].select.A;
            B1.innerText = content01[content01_index].select.B;
            C1.innerText = content01[content01_index].select.C;
            D1.innerText = content01[content01_index].select.D;
            // 2题区内容的答案
            A2.innerText = content02[content02_index].select.A;
            B2.innerText = content02[content02_index].select.B;
            C2.innerText = content02[content02_index].select.C;
            D2.innerText = content02[content02_index].select.D;

            // 点击答案按钮
            answer.onclick = () => { // 第一次点击答案按钮，出第一题的答案
                // 为什么需要做这个判断呢？ 因为需要出两次答案，需点击两次按钮
                if (answer.name == 'one') {
                    answer.name = 'two';
                    // content01[content01_index].answer 获取当前题目的正确答案
                    // 此处为什么+1呢？ 因为html中给答案标签命名为A1.A2.B1.B2
                    var answer1 = document.getElementById(content01[content01_index].answer + "1");
                    // 给正确答案添加class属性，该class写好了正确答案的样式
                    answer1.className = 'correct_answer';

                } else { // 第二次点击答案按钮，出第二题的答案
                    answer.name = 'one';
                    var answer2 = document.getElementById(content02[content02_index].answer + "2");
                    answer2.className = 'correct_answer';

                    // 禁用答案按钮、启用开始按钮
                    answer.disabled = true;
                    begin.disabled = false;

                    // 题目不能出现第二次，所以将随机出来的这题从数组中移除
                    content01.splice(content01_index, 1); // splice()第一个参数：从第几个元素开始删，第二个参数：删几个元素
                    content02.splice(content02_index, 1);

                    // 判断一下是否还有题目，没有则将开始、答案按钮都禁用掉
                    if (content01.length == 0 || content02.length == 0) {
                        // disabled=true 是开启禁用的意思
                        answer.disabled = true;
                        begin.disabled = true;
                    }
                }
            }
        }
        // 让题目晃动起来，一直调用此方法，使用计时器
        timer = setInterval(fn, 2);
    } else { // 点击暂停
        // 将按钮value值改为开始
        begin.value = '开始';
        // 点击暂停就清除计时器
        clearInterval(timer);
        // 启用答案按钮、禁用开始按钮
        answer.disabled = false;
        begin.disabled = true;
    }
}
复制成功

拒绝白嫖，关注+一键三连相关作品再领取源码，谢谢

原创 系统 网页设计 html javascript css Web前端
本文为我原创，未经授权禁止转载
cv19288228