js實現考試隨機選題

時間 2019-12-05

原文原文鏈接

考試的時候常常用到，發在這裏記錄一下
基本信息包括：學號、姓名、題號、題目名稱
實現原理：給每個題目添加一個編號，JS生成隨機數，遍歷每個學生，把題目根據生成的隨機數做爲題目編號放入學生信息中
效果圖：

代碼：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    table{
        width: 1000px;
        margin: 50px auto;
        border-collapse: collapse;
        line-height: 30px;
        text-align: center;
    }
    caption{
        font-size: 30px;
        letter-spacing: 5px;
        line-height: 50px;
    }
    th,td{
        border: 1px #66667d solid;
    }
</style>
<body>
<table>
    <caption>隨機選題</caption>
    <thead>
    <th>學號</th>
    <th>姓名</th>
    <th>題號</th>
    <th>題目名稱</th>
    </thead>
    <tbody id="tbody">
    </tbody>
</table>
<template id="temp1">
    <tr>
        <td>{{student}}</td>
        <td>{{student_name}}</td>
        <td>{{topic}}</td>
        <td>{{topic_name}}</td>
    </tr>
</template>
<script src="js/data.js"></script>
<script>
    var htmlText='';
    var tbody=document.getElementById('tbody');
    var str=document.getElementById('temp1').innerHTML;
    var i,len=topic.length,arr=[];
    // 模板方法，適用於文本結構複雜狀況
    student.forEach(function (el) {
        i=parseInt(Math.random()*len);
        arr.push(str.replace('{{student}}',el.no).replace('{{student_name}}',el.name)
            .replace('{{topic}}',topic[i].no).replace('{{topic_name}}',topic[i].name));
    });
    tbody.innerHTML=arr.join('');
    // 經常使用方法
    // student.forEach(function (el) {
    //     i=parseInt(Math.random()*len);
    //     htmlText+= '<tr><td>'+el.no+'</td><td>'+el.name+'</td><td>'+topic[i].no+'</td><td>'+topic[i].name+'</td></tr>'
    // });
    // tbody.innerHTML=htmlText;
</script>
</body>
</html>

學生數據表：框架

var student=[];
student[student.length]={no:'201658234069',name:'喜羊羊'};
student[student.length]={no:'201658234050',name:'李二'};
student[student.length]={no:'201658234066',name:'劉蛋蛋'};
student[student.length]={no:'201658234055',name:'李白'};
student[student.length]={no:'201658234056',name:'陸游'};
student[student.length]={no:'201658234057',name:'白居易'};
student[student.length]={no:'201658234058',name:'杜甫'};
student[student.length]={no:'201658234059',name:'李清照'};
student[student.length]={no:'201658234060',name:'蘇軾'};
student[student.length]={no:'201658234063',name:'王安石'};
student[student.length]={no:'201658234064',name:'杜牧'};
student[student.length]={no:'201658234065',name:'邱清泉'};
student[student.length]={no:'201658234067',name:'辛棄疾'};
student[student.length]={no:'201658234068',name:'孟浩然'};
student[student.length]={no:'201658234069',name:'楊萬里'};
student[student.length]={no:'201658234070',name:'歐陽修'};
student[student.length]={no:'201658234058',name:'范仲淹'};
student[student.length]={no:'201658234059',name:'王維'};
student[student.length]={no:'201658234060',name:'陶淵明'};
student[student.length]={no:'201658234063',name:'詩經'};
student[student.length]={no:'201658234064',name:'黃庭堅'};
student[student.length]={no:'201658234065',name:'屈原'};
student[student.length]={no:'201658234067',name:'司馬遷'};
student[student.length]={no:'201658234068',name:'袁枚'};
student[student.length]={no:'201658234069',name:'韓非'};
student[student.length]={no:'201658234070',name:'范成大'};
var topic=[];
topic[topic.length]={no:'1',name:'event測試'};
topic[topic.length]={no:'2',name:'flash動畫框架'};
topic[topic.length]={no:'3',name:'仿土豆天氣預報'};
topic[topic.length]={no:'4',name:'發微博'};
topic[topic.length]={no:'5',name:'右鍵菜單'};
topic[topic.length]={no:'6',name:'回車提交留言'};
topic[topic.length]={no:'7',name:'完美運動框架'};
topic[topic.length]={no:'8',name:'延時提示框'};
topic[topic.length]={no:'9',name:'數字時鐘'};
topic[topic.length]={no:'10',name:'滾動條'};
topic[topic.length]={no:'11',name:'簡易日曆'};
topic[topic.length]={no:'12',name:'虛框拖拽'};
topic[topic.length]={no:'13',name:'表單'};
topic[topic.length]={no:'14',name:'運行代碼'};
topic[topic.length]={no:'15',name:'鍵盤事件遊戲'};
topic[topic.length]={no:'16',name:'長方形幻燈片'};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。