jquery_实现传入试题数据自动生成网页试卷

最新推荐文章于 2023-01-30 15:23:24 发布

kelai51716449

最新推荐文章于 2023-01-30 15:23:24 发布

阅读量834

点赞数

分类专栏：练一练文章标签： jquery html javascript css es6

本文链接：https://blog.csdn.net/weixin_51716449/article/details/120452579

版权

练习003：实现传入试题数据自动生成网页试卷

【描述】

创建一个名为Page的class对象
该对象在实例化时可以接受试卷数据作为参数
Page class的实例可以调用init初始化方法，将试卷数据通过DOM操作渲染在页面上成为网页试卷
点击选择题的答案选项，背景高亮，再次点击，取消选择答案
所有选择题都勾选了，才可以提交试卷，否则，不可以提交试卷
当点击提交试卷，延迟1s后，根据试卷数据提供的答案计算成绩并显示考试结果

【基础】

HTML、CSS、 JavaScript、 jQuery、ES6

【工具】

vscode、chrom、jquery-3.6.0.min.js(下载)

【代码】

<!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>实现传入试题数据自动生成网页试卷</title>
    <style>
        *{
     
            margin: 0;
            padding: 0;
        }
        ul{
     
            list-style: none;
        }
        .container{
     
            width: 800px;
            margin: 0 auto;
        }
        .header{
     
            background:lightblue;
            height: 80px;
            font-size: 24px;
            line-height: 80px;
            text-align: center;
            color: #000;
        }
        .title{
     
            padding: 10px;
            background: lightseagreen;
            color: #000;
        }
        .q-box{
     
            padding-left: 20px;
            height: 30px;
            line-height: 30px;
            background: lightblue;
        }
        .q-opt{
     
            display: flex;
        }
        .item{
     
            margin: 10px 36px 20px 10px;
            padding: 6px 10px;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 27px;
        }
        .active{
     
            border-color: seagreen;
            color: seagreen;
        }
        .submit{
     
            padding

最低0.47元/天解锁文章

kelai51716449

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
jquery_实现传入试题数据自动生成网页试卷

练习003：实现传入试题数据自动生成网页试卷【描述】创建一个名为Page的class对象该对象在实例化时可以接受试卷数据作为参数Page class的实例可以调用init初始化方法，将试卷数据通过DOM操作渲染在页面上成为网页试卷点击选择题的答案选项，背景高亮，再次点击，取消选择答案所有选择题都勾选了，才可以提交试卷，否则，不可以提交试卷当点击提交试卷，延迟1s后，根据试卷数据提供的答案计算成绩并显示考试结果【基础】HTML、CSS、 JavaScript、 jQuery、ES6【工具】
复制链接

扫一扫