You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
4.5 KiB
93 lines
4.5 KiB
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>随机点名系统</title>
|
|
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css'>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Long+Cang&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<h1>随机点名系统</h1>
|
|
<div id="message" style="display:none; position:fixed; top:20px; left:50%; transform:translateX(-50%); background-color:rgba(0, 0, 0, 0.5); color:white; padding:10px; border-radius:5px; white-space:nowrap;">
|
|
</div>
|
|
<div class="container">
|
|
<div class="file-upload">
|
|
<button
|
|
data-tooltip="导入名单"
|
|
id="fileButton" style="background: none; border: none; cursor: pointer;">
|
|
<img src="file-icon.svg" alt="选择文件" style="width: 40px; height: 40px;" />
|
|
</button>
|
|
<span id="fileName" style="display: none;">未选择文件</span>
|
|
</div>
|
|
|
|
<div class="modal" id="uploadModal">
|
|
<div class="modal-content">
|
|
<span class="close-button" id="closeButton">×</span>
|
|
<div class="upload-box" id="uploadBox">
|
|
<p id="uploadText">点击或拖拽文件到此处上传</p>
|
|
<input type="file" id="fileInput" style="display: none;"/>
|
|
<div class="pic">↓</div>
|
|
</div>
|
|
<div class="button-container">
|
|
<button id="cancelButton">取消</button>
|
|
<button id="okButton">确定</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-row">
|
|
<button id="drawButton" onclick="startDraw()" style="margin-bottom: 40px;">开始点名</button>
|
|
</div>
|
|
|
|
<div class="button-row">
|
|
<button id="onClass" onclick="onClass()" style="width:15% ;">到场</button>
|
|
</div>
|
|
|
|
<div class="button-row">
|
|
<button id="correctButton" onclick="repeatCorrectly()">准确重复问题</button>
|
|
<button id="incorrectButton" onclick="repeatIncorrectly()">重复不准确</button>
|
|
</div>
|
|
|
|
<div class="rating">
|
|
<input type="radio" name="rating" id="5" value="3" />
|
|
<label for="5" data-value="5"><i class="icon ion-md-star-outline"></i><span class="star-number hidden">3</span></label>
|
|
<input type="radio" name="rating" id="4" value="2" />
|
|
<label for="4" data-value="4"><i class="icon ion-md-star-outline"></i><span class="star-number hidden">2</span></label>
|
|
<input type="radio" name="rating" id="3" value="1.5" />
|
|
<label for="3" data-value="3"><i class="icon ion-md-star-outline"></i><span class="star-number hidden">1.5</span></label>
|
|
<input type="radio" name="rating" id="2" value="1" />
|
|
<label for="2" data-value="2"><i class="icon ion-md-star-outline"></i><span class="star-number hidden">1</span></label>
|
|
<input type="radio" name="rating" id="1" value="0.5" />
|
|
<label for="1" data-value="1"><i class="icon ion-md-star-outline"></i><span class="star-number hidden">0.5</span></label>
|
|
</div>
|
|
|
|
|
|
|
|
<!--<input type="text" id="manualPoints" placeholder="手动加减积分 (范围 0.5 到 3)" /> -->
|
|
|
|
<div class="button-row">
|
|
<!--<button id="manualButton" onclick="updatePoints()" disabled>更新积分</button> -->
|
|
<button id="resetButton" onclick="resetAllPoints()" >重置所有积分</button>
|
|
</div>
|
|
|
|
<div class="view-student-row">
|
|
<button onclick="viewStudentList()">查看学生名单</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="scrollingNames"></div>
|
|
<div id="selectedStudent"></div>
|
|
<div class="tooltip" id="tooltip"></div>
|
|
<canvas id="particleCanvas"></canvas>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.1/xlsx.full.min.js"></script>
|
|
<script src="mainPage.js"></script>
|
|
</body>
|
|
</html> |