|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>被点名学生</title>
|
|
|
<link href="static/plugins/bootstrap-4.6.2/css/bootstrap.min.css" rel="stylesheet">
|
|
|
<style>
|
|
|
body {
|
|
|
font-family: Arial, sans-serif;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
|
margin: 20px;
|
|
|
}
|
|
|
|
|
|
.left-section {
|
|
|
text-align: left;
|
|
|
width: 40%;
|
|
|
}
|
|
|
|
|
|
.right-section {
|
|
|
text-align: left;
|
|
|
width: 55%;
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
font-size: 18px;
|
|
|
font-family: 'Georgia', serif;
|
|
|
color: #333;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
label {
|
|
|
display: inline-block;
|
|
|
margin-right: 20px;
|
|
|
font-size: 16px;
|
|
|
font-family: Arial, sans-serif;
|
|
|
color: #555;
|
|
|
}
|
|
|
|
|
|
input[type="radio"] {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
.hidden {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.circle {
|
|
|
|
|
|
text-align: center;
|
|
|
font-size: 24px;
|
|
|
border-radius: 50%;
|
|
|
border: 2px solid black;
|
|
|
width: 200px;
|
|
|
height: 200px;
|
|
|
display: inline-block;
|
|
|
line-height: 200px;
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
|
|
|
color: #4CAF50;
|
|
|
|
|
|
}
|
|
|
|
|
|
button[type="submit"] {
|
|
|
font-size: 16px;
|
|
|
font-family: 'Helvetica Neue', sans-serif;
|
|
|
color: white;
|
|
|
|
|
|
background-color: #007BFF;
|
|
|
border: none;
|
|
|
border-radius: 5px;
|
|
|
padding: 10px 20px;
|
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
|
|
|
button[type="submit"]:hover {
|
|
|
background-color: #0056b3;
|
|
|
}
|
|
|
|
|
|
.circle {
|
|
|
font-size: 48px;
|
|
|
border-radius: 50%;
|
|
|
border: 5px solid #4CAF50;
|
|
|
width: 200px;
|
|
|
height: 200px;
|
|
|
display: inline-block;
|
|
|
line-height: 200px;
|
|
|
margin: 20px auto;
|
|
|
background-color: #ADD8E6;
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<div class="left-section">
|
|
|
<h1>被点名学生:</h1>
|
|
|
<div class="circle">
|
|
|
<strong>{{ student.name }}</strong>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<div class="right-section">
|
|
|
<form action="/record_attendance" method="post">
|
|
|
<input type="hidden" name="student_id" value="{{ student.id }}">
|
|
|
|
|
|
<div id="attendance_section">
|
|
|
<p>是否在场：</p>
|
|
|
<label>
|
|
|
<input type="radio" name="is_present" value="yes"> 是
|
|
|
</label>
|
|
|
<label>
|
|
|
<input type="radio" name="is_present" value="no"> 否
|
|
|
</label><br><br>
|
|
|
</div>
|
|
|
|
|
|
{% if student.has_shield > 0 %}
|
|
|
<div id="shield_section" class="hidden">
|
|
|
<p>你拥有智慧护盾，是否选择使用（剩余护盾数: {{ student.has_shield }}）：</p>
|
|
|
<label>
|
|
|
<input type="radio" name="use_shield" value="yes"> 是
|
|
|
</label>
|
|
|
<label>
|
|
|
<input type="radio" name="use_shield" value="no"> 否
|
|
|
</label><br><br>
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
|
|
|
<div id="answer_question_section" class="hidden">
|
|
|
<p>是否让他回答问题：</p>
|
|
|
<label>
|
|
|
<input type="radio" name="answer_question" value="yes"> 是
|
|
|
</label>
|
|
|
<label>
|
|
|
<input type="radio" name="answer_question" value="no"> 否
|
|
|
</label><br><br>
|
|
|
</div>
|
|
|
|
|
|
<div id="repeat_question_section" class="hidden">
|
|
|
<p>是否能够重复问题：</p>
|
|
|
<label>
|
|
|
<input type="radio" name="repeat_question" value="yes"> 是
|
|
|
</label>
|
|
|
<label>
|
|
|
<input type="radio" name="repeat_question" value="no"> 否
|
|
|
</label><br><br>
|
|
|
</div>
|
|
|
|
|
|
<div id="score_section" class="hidden">
|
|
|
<label>请给出评分（0.5 - 3）：</label>
|
|
|
<input type="number" name="score" min="0.5" max="3" step="0.1"><br><br>
|
|
|
</div>
|
|
|
|
|
|
<button type="submit">提交</button>
|
|
|
|
|
|
</form>
|
|
|
<a href="/" class="btn btn-primary" style="margin-top:500px ">返回首页</a>
|
|
|
<script>
|
|
|
const isPresentRadios = document.getElementsByName('is_present');
|
|
|
const useShieldRadios = document.getElementsByName('use_shield');
|
|
|
const answerQuestionSection = document.getElementById('answer_question_section');
|
|
|
const repeatQuestionSection = document.getElementById('repeat_question_section');
|
|
|
const scoreSection = document.getElementById('score_section');
|
|
|
const shieldSection = document.getElementById('shield_section');
|
|
|
|
|
|
for (const radio of isPresentRadios) {
|
|
|
radio.addEventListener('change', function () {
|
|
|
if (this.value === 'yes') {
|
|
|
if (shieldSection) {
|
|
|
shieldSection.classList.remove('hidden');
|
|
|
} else {
|
|
|
answerQuestionSection.classList.remove('hidden');
|
|
|
}
|
|
|
} else {
|
|
|
answerQuestionSection.classList.add('hidden');
|
|
|
repeatQuestionSection.classList.add('hidden');
|
|
|
scoreSection.classList.add('hidden');
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
if (useShieldRadios) {
|
|
|
for (const radio of useShieldRadios) {
|
|
|
radio.addEventListener('change', function () {
|
|
|
if (this.value === 'yes') {
|
|
|
answerQuestionSection.classList.add('hidden');
|
|
|
repeatQuestionSection.classList.add('hidden');
|
|
|
scoreSection.classList.add('hidden');
|
|
|
} else {
|
|
|
answerQuestionSection.classList.remove('hidden');
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
document.getElementsByName('answer_question').forEach((radio) => {
|
|
|
radio.addEventListener('change', function () {
|
|
|
if (this.value === 'yes') {
|
|
|
repeatQuestionSection.classList.remove('hidden');
|
|
|
} else {
|
|
|
repeatQuestionSection.classList.add('hidden');
|
|
|
scoreSection.classList.add('hidden');
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
document.getElementsByName('repeat_question').forEach((radio) => {
|
|
|
radio.addEventListener('change', function () {
|
|
|
if (this.value === 'yes') {
|
|
|
scoreSection.classList.remove('hidden');
|
|
|
} else {
|
|
|
scoreSection.classList.add('hidden');
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</div>
|
|
|
</body>
|
|
|
|
|
|
</html> |
