0
点赞
收藏
分享

微信扫一扫

html静态网页：自动出题评分系统

小迁不秃头 2022-06-09 阅读 53
htmlcssi++Java编程语言

效果：
html静态网页：自动出题评分系统_html
源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #app{
                width: 800px;
                height: 600px;
                border: 4px solid green;
                margin: 0 auto;
            }
            #titleBox{
                width: 100%;
                height: 80px;
                /* border: 4px solid green;
                margin: -4px; */
                border-bottom: 4px solid green;
            }
            #questionsBox{
                width: 100%;
                height: 440px;
                border-bottom: 4px solid green;
            }
            #submitBox{
                width: 100%;
                height: 72px;
                line-height: 72px;
                text-align: center;
            }
            #titleBox div{
                float: left;
            }
            #titleBox .div1,#titleBox .div3{
                width: 150px;
                height: 80px;
                line-height: 80px;
                /* background-color: aqua; */
                text-align: center;
                font-size: 30px;
            }
            #titleBox .div1{
                color: green;
                cursor: pointer;
            }
            #titleBox .div3{
                color: red;
                font-size:25px ;
                display: none;
            }
            #titleBox .div2{
                width: 500px;
                height: 80px;
                text-align: center;
            }
            #submitBox button{
                width: 95%;
                height: 40px;
                background-color: #008000;
                font-size: 28px;
                border: none;
                border-radius: 28px;
            }
            #questionsBox ul{
                list-style: none;
            }
            #questionsBox ul li{
                float: left;
                width: 180px;
                font-size: 25px;
                text-align: right;
                margin-top: 40px;
            }
            #questionsBox ul li input{
                width: 60px;
                font-size: 25px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="titleBox">
                <div class="div1">重新出题</div>
                <div class="div2">
                    <h1>自动出题和评分系统</h1>
                    <h3>(小学生100以内加减法运算)</h3>
                </div>
                <div class="div3">得分：XXX分</div>
            </div>
            <div id="questionsBox">
                <ul>
                    <!-- <li>99-77=<input type="text"></li>
                    <li>1-1=<input type="text"></li>
                    <li>99-77=<input type="text"></li>
                    <li>99-77=<input type="text"></li>
                    <li>2-1=<input type="text"></li>
                    <li>99-77=<input type="text"></li> -->
                </ul>
            </div>
            <div id="submitBox">
                <button>提交</button>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        getQuestions();
        
        function getQuestions(){
            var ul = document.querySelector("#questionsBox ul");
            for (var i = 1; i <=20; i++) {
                var op = parseInt(Math.random()*2)?"+":"-";
                
                do{
                    var a = parseInt(Math.random()*100);
                    var b = parseInt(Math.random()*100);
                    if(op == "-"){
                        if (a >= b) {
                            break;
                        } 
                    }
                    if(op == "+"){
                        if (a + b <= 100) {
                            break;
                        } 
                    }
                }while(1);
                
                var li = '<li>' + a + op + b + '=<input type="text"></li>';
                ul.innerHTML += li;
            }
        }
        
        //重新出题
        document.querySelector("#titleBox .div1").onclick = function(){
            window.location.reload();//刷新
        }
        //提交，判断得分
        document.querySelector("#submitBox button").onclick = function(){
            document.querySelector("#titleBox .div3").style.display = "block"
            var score = 0;
            
            //..........计算得分，实现评分功能，补充代码  score += 5
            
            document.querySelector("#titleBox .div3").innerText = "得分："+ score +"分"
        }
    </script>
</html>

调了下，这个更全：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #app{
                width: 800px;
                height: 600px;
                border: 4px solid green;
                margin: 0 auto;
            }
            #titleBox{
                width: 100%;
                height: 80px;
                /* border: 4px solid green;
                margin: -4px; */
                border-bottom: 4px solid green;
            }
            #questionsBox{
                width: 100%;
                height: 440px;
                border-bottom: 4px solid green;
            }
            #submitBox{
                width: 100%;
                height: 72px;
                line-height: 72px;
                text-align: center;
            }
            #titleBox div{
                float: left;
            }
            #titleBox .div1,#titleBox .div3{
                width: 150px;
                height: 80px;
                line-height: 80px;
                /* background-color: aqua; */
                text-align: center;
                font-size: 30px;
            }
            #titleBox .div1{
                color: green;
                cursor: pointer;
            }
            #titleBox .div3{
                color: red;
                font-size:25px ;
                display: none;
            }
            #titleBox .div2{
                width: 500px;
                height: 80px;
                text-align: center;
            }
            #submitBox button{
                width: 95%;
                height: 40px;
                background-color: #008000;
                font-size: 28px;
                border: none;
                border-radius: 28px;
            }
            #questionsBox ul{
                list-style: none;
            }
            #questionsBox ul li{
                float: left;
                width: 180px;
                font-size: 25px;
                text-align: right;
                margin-top: 40px;
            }
            #questionsBox ul li input{
                width: 60px;
                font-size: 25px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="titleBox">
                <div class="div1">重新出题</div>
                <div class="div2">
                    <h1>自动出题和评分系统</h1>
                    <h3>(小学生100以内加减法运算)</h3>
                </div>
                <div class="div3">得分：XXX分</div>
            </div>
            <div id="questionsBox">
                <ul>
                    <!-- <li>99-77=<input type="text"></li>
                    <li>1-1=<input type="text"></li>
                    <li>99-77=<input type="text"></li>
                    <li>99-77=<input type="text"></li>
                    <li>2-1=<input type="text"></li>
                    <li>99-77=<input type="text"></li> -->
                </ul>
            </div>
            <div id="submitBox">
                <button>提交</button>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        getQuestions();
        
        function getQuestions(){
            var ul = document.querySelector("#questionsBox ul");
            for (var i = 1; i <=20; i++) {
                var op = parseInt(Math.random()*2)?"+":"-";
                
                do{
                    var a = parseInt(Math.random()*100);
                    var b = parseInt(Math.random()*100);
                    if(op == "-"){
                        if (a >= b) {
                            break;
                        } 
                    }
                    if(op == "+"){
                        if (a + b <= 100) {
                            break;
                        } 
                    }
                }while(1);
                
                var li = '<li>' + a + op + b + '=<input type="text"></li>';
                ul.innerHTML += li;
            }
        }
        
        //重新出题
        document.querySelector("#titleBox .div1").onclick = function(){
            window.location.reload();//刷新
        }
        //提交，判断得分
        document.querySelector("#submitBox button").onclick = function(){
            document.querySelector("#titleBox .div3").style.display = "block"
            var score = 0;
            //获取所有li
            var liArr = document.querySelectorAll("#questionsBox ul li");
            console.log(liArr);
            //遍历所有li
            for (var i = 0; i < liArr.length; i++) {
                var li = liArr[i];
                //一、获取标准答案
                //获取li的内容字符串
                var str = li.innerText;
                console.log(str);
                //获取算术式，截取等号左边的式子
                var mathStr = str.substring(0,str.length-1);
                console.log(mathStr);
                //计算标准答案
                var answer = eval(mathStr);
                console.log(answer);
                
                // 二、获取学生答案
                //获取input框
                var input = li.getElementsByTagName("input")[0];
                console.log(input);
                //获取input框中输入的内容，得到学生答案
                var studentAnswer = input.value;//""
                console.log(studentAnswer);
                
                //三、判断对错，计算得分
                //先确定学生是否填了答案，如果填了答案
                if (studentAnswer != "") {
                    //再判断所填是否正确
                    if (answer == studentAnswer) {
                        score += 5;//答案正确，加分
                    }
                }
               
            }
            document.querySelector("#titleBox .div3").innerText = "得分："+ score +"分"
        }
    </script>
</html>


举报

相关推荐

简易评分系统

算法开发语言python

信用评分系统运行原理下篇

数据柱状图原始数据虚拟化云计算

[答疑]老师用评分系统评分的序列图

业务逻辑生命周期电子杂志虚拟化云计算

信用评分系统运行原理中篇-分箱逻辑

d3数据python虚拟化云计算

【算法题】2353. 设计食物评分系统

javahtmljavascriptPair字符串JavaScript前端开发

代码实现高性能异构分布式图上网页节点评分系统

#includepython预处理低代码

静态网页设计html

3dicohtmlHTML5移动开发

html静态网页设计

htmlcssweb前端HTML5移动开发

基于java Springboot实现课程评分系统设计和实现

dockerlinux容器运维面试笔记服务器

学生为学校教研室开发技能大赛评分系统

bootstrap前端htmlssm毕业设计比赛管理系统Python后端开发
0 条评论