From d93f89b1b6bf8a4ec3f22bc6bfbaff7ce33cc86b Mon Sep 17 00:00:00 2001
From: Guarp <guarp2022@163.com>
Date: Thu, 6 Mar 2025 09:46:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=B0pod;=20=E4=BF=AE?=
=?UTF-8?q?=E6=94=B9pod=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/GeneralRenderer.vue | 14 ++++
src/pages/Demos_home.vue | 2 +-
src/pages/demoPages/podExercise/Pod_page.vue | 67 +++++++++++++++----
.../demoPages/podExercise/QuestionText.vue | 6 +-
src/pages/demoPages/podExercise/Quiz.vue | 20 ++++--
5 files changed, 83 insertions(+), 26 deletions(-)
diff --git a/src/components/GeneralRenderer.vue b/src/components/GeneralRenderer.vue
index 87eb65c..7e503f3 100644
--- a/src/components/GeneralRenderer.vue
+++ b/src/components/GeneralRenderer.vue
@@ -75,6 +75,8 @@ onMounted(async () => {
.renderer-container p {
margin-bottom: 1rem;
+ display: flex;
+ justify-content: center;
}
.renderer-container code {
@@ -132,6 +134,18 @@ onMounted(async () => {
background-color: #222;
color: #f0f0f0;
}
+.pod-image {
+ align-self: center;
+ filter: invert(92%);
+ height: auto;
+ max-height: 300px;
+ width: auto;
+ max-width: 100%;
+ margin: 10px 0;
+}
+.theme-light img {
+ filter: invert(0);
+}
.theme-light .renderer-container {
font-family: 'Arial', sans-serif;
font-size: 1rem;
diff --git a/src/pages/Demos_home.vue b/src/pages/Demos_home.vue
index dfbd1be..5c57fa5 100644
--- a/src/pages/Demos_home.vue
+++ b/src/pages/Demos_home.vue
@@ -17,7 +17,7 @@ const demos = ref([
date: '2025-2-26',
author: ["Louis Zhou"],
tags: ['课内'],
- image: 'https://' + getDomain() + '/data/file/pod.png'
+ image: 'https://' + getDomain() + '/data/demos/pod/icon.png'
},
]);
diff --git a/src/pages/demoPages/podExercise/Pod_page.vue b/src/pages/demoPages/podExercise/Pod_page.vue
index 80aafaa..be60cec 100644
--- a/src/pages/demoPages/podExercise/Pod_page.vue
+++ b/src/pages/demoPages/podExercise/Pod_page.vue
@@ -1,30 +1,51 @@
<script setup>
-import {ref} from "vue";
+import {computed, ref} from "vue";
const podList = ref([
{
- title: 'PHY MCQ 1',
- file: 'phy250226',
+ title: 'MCQ 1',
+ categories: 'AP phy 1',
+ file: '250227',
describe: '',
date: '2025-2-26'
},{
- title: 'PHY MCQ 2',
- file: 'phy250227',
+ title: 'MCQ 2',
+ categories: 'AP phy 1',
+ file: '250306',
describe: '',
date: '2025-2-27'
- },
+ },{
+ title: 'MCQ 3',
+ categories: 'AP phy 1',
+ file: '250313',
+ describe: '',
+ date: '2025-3-6'
+ }
])
+
+const uniqueCats = computed(() => {
+ const keys = new Set();
+ podList.value.forEach(item => {
+ keys.add(item.categories);
+ });
+ return Array.from(keys);
+});
</script>
<template>
<div class="container" v-if="/^\/demos\/pod\/?$/.test($route.path)">
<h1>无限制做题大赛</h1>
- <div class="pod-container">
- <router-link class="pods" v-for="pod in podList" :to="`/demos/pod/quiz?id=${pod.file}`">
- <div class="title">{{ pod.title }}</div>
- <div class="date">{{ pod.date }}</div>
- </router-link>
+ <div class="pod-container" v-for="cat in uniqueCats">
+ <div class="folder">
+ <div class="folder-title">{{ cat }}</div>
+ <div class="pods-display">
+ <router-link class="pods" v-for="pod in podList" :to="`/demos/pod/quiz?cat=${pod.categories.toLowerCase().replaceAll(' ', '')}&id=${pod.file}`">
+ <div class="title">{{ pod.title }}</div>
+ <div class="date">{{ pod.date }}</div>
+ </router-link>
+ </div>
+ </div>
</div>
</div>
<router-view v-else />
@@ -49,6 +70,26 @@ const podList = ref([
flex-wrap: wrap;
gap: 20px;
}
+.folder {
+ background: rgba(128, 128, 128, 0.11);
+ display: flex;
+ padding: 15px;
+ flex-wrap: wrap;
+ flex-direction: column;
+ align-items: center;
+ max-width: 520px;
+}
+.folder-title {
+ font-size: 25px;
+}
+.pods-display {
+ display: flex;
+ padding: 15px;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
.pods {
display: flex;
flex-direction: column;
@@ -56,12 +97,12 @@ const podList = ref([
justify-content: center;
width: 150px;
height: 150px;
- background: #2a2a2a;
+ background: #131313;
max-width: 800px;
cursor: pointer;
}
.theme-light .pods {
- background: #efefef;
+ background: #ffffff;
}
.title {
font-size: 20px;
diff --git a/src/pages/demoPages/podExercise/QuestionText.vue b/src/pages/demoPages/podExercise/QuestionText.vue
index ca05918..cb520e5 100644
--- a/src/pages/demoPages/podExercise/QuestionText.vue
+++ b/src/pages/demoPages/podExercise/QuestionText.vue
@@ -26,7 +26,7 @@ function replaceMedia(text, medias) {
if (medias[mediaKey]) {
const [type, url, width, height] = medias[mediaKey];
if (type === 'image') {
- return `<img src="${url}" width="100%" height="auto" alt="Question Image" />`;
+ return `<img class="pod-image" src="${url}" width="100%" height="auto" alt="Question Image" />`;
}
}
return '';
@@ -37,9 +37,5 @@ const processedText = computed(() => replaceMedia(props.text, props.medias));
</script>
<style scoped>
-img {
- height: auto;
- margin: 10px 0;
-}
</style>
\ No newline at end of file
diff --git a/src/pages/demoPages/podExercise/Quiz.vue b/src/pages/demoPages/podExercise/Quiz.vue
index a8b6085..9e97354 100644
--- a/src/pages/demoPages/podExercise/Quiz.vue
+++ b/src/pages/demoPages/podExercise/Quiz.vue
@@ -43,11 +43,16 @@
<div v-if="similarQuestions.length > 0" class="similar-questions">
<h3>对比其他类似题目</h3>
<div v-for="(similar, index) in similarQuestions" :key="index" class="similar-question">
- <h4>题目 {{ index + 1 }}</h4>
+
+ <h4>-- 题目 {{ index + 1 }} --</h4>
<QuestionText :text="similar.text" :medias="data.medias"/>
<p>正确答案：
<general-renderer :content-input="processMedia(similar.correctAnswer, data.medias)"></general-renderer>
</p>
+ <div v-if="similar.explanation" class="explanation">
+ <h4>解题思路</h4>
+ <general-renderer :content-input="processMedia(similar.explanation, data.medias)"></general-renderer>
+ </div>
</div>
</div>
</div>
@@ -84,7 +89,6 @@ const data = reactive({
itemtypes: [],
texts: [],
explanations: [],
- gradings: [],
answerkeys: [],
answers: [],
medias: {}
@@ -115,9 +119,10 @@ const progressPercentage = computed(() => {
});
const initial = async () => {
- const file = route.query.id || 'phy250226';
+ const categorise = route.query.cat || 'apphy1'
+ const file = route.query.id || 'phy250227';
try {
- const response = await axios.get(`https://mva-cyber.club/data/file/${file}.json`);
+ const response = await axios.get(`https://mva-cyber.club/data/demos/pod/${categorise}/${file}.json`);
const jsonData = response.data;
Object.assign(data, jsonData);
generateNewExam(); // 初始生成一份试卷
@@ -170,7 +175,7 @@ function processMedia(text, medias) {
if (medias[mediaKey]) {
const [type, url, width, height] = medias[mediaKey];
if (type === 'image') {
- return `<img src="${url}" width="100%" height="auto" alt="Question Image" />`;
+ return `<img class="pod-image" src="${url}" width="100%" height="auto" alt="Question Image" />`;
}
}
return '';
@@ -270,7 +275,8 @@ function findSimilarQuestions() {
const correctIdx = data.answerkeys[i].findIndex((key, idx) => idx > 0 && key === 1) - 1;
similar.push({
text: data.texts[i],
- correctAnswer: data.answers[i][correctIdx + 1]
+ correctAnswer: data.answers[i][correctIdx + 1],
+ explanation: data.explanations[i]
});
}
}
@@ -334,7 +340,7 @@ function nextQuestion() {
//max-width: 800px;
margin: auto;
height: calc(100vh - 109px);
- overflow-y: auto;
+ overflow-y: scroll;
padding: 20px;
font-family: Arial, sans-serif;
}