前端

question.vue

@@ -0,0 +1,207 @@
+<template>
+  <view>
+    <!-- 问题容器，只有在 question 存在时才显示 -->  
+    <view class="question-container" v-if="question">
+      <text>问题: {{ question }}</text>
+      <!-- 用户输入答案的输入框 -->
+      <input v-model="studentAnswer" placeholder="请输入你的答案" class="answer-input" />
+      <!-- 提交答案 -->
+      <button @click="checkAnswer" class="button">提交答案</button>
+    </view>
+
+    <view class="txzz">
+      <button @click="selectRandomStudent" style="width: 320px;">
+        <text>天选之子：{{ selectedStudent?.name || '点击选择' }}</text>
+      </button>
+      <text v-if="selectedStudent">当前积分: {{ selectedStudent.points }}</text>
+    </view>
+    
+    <!-- 签到 -->
+    <view class="atten">
+      <button @click="signIn" class="button">签到</button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const studentAnswer = ref(''); 
+const question = ref(''); 
+const correctAnswer = ref(''); 
+const rcallData = ref([]); // 学生数据
+const selectedStudent = ref(null); // 被选中的学生
+
+const fetchQuestion = async () => {
+    try {
+        const res = await uni.request({
+            url: 'http://10.198.140.41:3000/api/questions',
+            method: 'GET'
+        });
+
+        if (res.statusCode === 200 && res.data.length > 0) {
+            const questionData = res.data[0];
+            question.value = questionData.question; 
+            correctAnswer.value = questionData.correctAnswer; 
+        } else {
+            console.error('获取问题失败:', res);
+            uni.showToast({ title: '无法获取问题', icon: 'none' });
+        }
+    } catch (error) {
+        console.error('请求时发生错误:', error);
+        uni.showToast({ title: '网络错误', icon: 'none' });
+    }
+};
+
+const getans = async () => {
+    try {
+        let res = await uni.request({
+            url: "http://10.198.140.41:3000/api/upload",
+            method: 'GET',
+        });
+        
+        if (res && res.data) {
+            rcallData.value = res.data.map(student => ({
+                name: student.name,
+                points: student.points || 0
+            }));
+            console.log(rcallData.value);
+        }
+    } catch (error) {
+        console.error("获取学生数据失败:", error);
+    }
+};
+
+const selectRandomStudent = () => {
+    if (rcallData.value.length === 0) {
+        uni.showToast({
+            title: '没有学生数据',
+            icon: 'none'
+        });
+        return;
+    }
+    const randomIndex = Math.floor(Math.random() * rcallData.value.length);
+    selectedStudent.value = rcallData.value[randomIndex];
+};
+
+const checkAnswer = async () => {
+    if (!selectedStudent.value) {
+        uni.showToast({
+            title: '请先选择天选之子',
+            icon: 'none'
+        });
+        return;
+    }
+
+    if (studentAnswer.value.trim() === '') {
+        uni.showToast({
+            title: '请输入答案', 
+            icon: 'none'
+        });
+        return;
+    }
+
+    if (studentAnswer.value === correctAnswer.value) {
+        selectedStudent.value.points += 2;
+        uni.showToast({
+            title: '回答正确', 
+            icon: 'success'
+        });
+    } else {
+        selectedStudent.value.points -= 1;
+        uni.showToast({
+            title: '回答错误', 
+            icon: 'none'
+        });
+    }
+
+    studentAnswer.value = '';
+
+    await sendAttendance(selectedStudent.value);
+};
+
+const signIn = () => {
+    if (selectedStudent.value) {
+        selectedStudent.value.points += 1;
+        uni.showToast({
+            title: '签到成功', 
+            icon: 'success'
+        });
+    }
+};
+
+const sendAttendance = async (student) => {
+    try {
+        const response = await uni.request({
+            url: "http://10.198.140.41:3000/api/upload",
+            method: 'POST',
+            data: {
+                name: student.name,
+                points: selectedStudent.value.points
+            },
+            header: {
+                'Content-Type': 'application/json'
+            }
+        });
+
+        if (response.statusCode === 200) {
+            console.log('Attendance updated successfully:', response.data);
+        } else {
+            console.error('Failed to update attendance:', response.data);
+        }
+    } catch (error) {
+        console.error('Error occurred while updating attendance:', error);
+    }
+};
+
+onMounted(() => {
+    fetchQuestion();
+    getans();
+});
+</script>
+
+<style scoped>
+.button {
+  display: block;
+  width: 320px;
+  height: 60px;
+  margin: 10px auto;
+  padding: 10px;
+  margin-top: 25px;
+  background-color: #1E90FF;
+  color: white;
+  text-align: center;
+  border-radius: 5px;
+}
+
+.answer-input {
+  width: 90%;
+  padding: 10px;
+  margin: 10px auto;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.question-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+  padding: 10px;
+}
+
+.txzz {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.atten {
+  display: flex;
+  align-content: center;
+  bottom: 40px;
+}
+</style>
+
+
+