测试新实例
This commit is contained in:
parent
cf39de10d8
commit
9926056f71
@ -10,7 +10,8 @@ import { marked } from "marked";
|
|||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
contentInput: {
|
contentInput: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: '',
|
||||||
|
required: true
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -206,6 +206,7 @@ onMounted(() => {
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
font-size: 70px;
|
font-size: 70px;
|
||||||
text-wrap: none;
|
text-wrap: none;
|
||||||
|
word-break: keep-all;
|
||||||
opacity: 0.08;
|
opacity: 0.08;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
47
src/pages/demoPages/podExercise/QuestionText.vue
Normal file
47
src/pages/demoPages/podExercise/QuestionText.vue
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<div v-html="processedText" class="question-text"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
medias: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const mediaRegex = /<media i(\d+)>/g;
|
||||||
|
|
||||||
|
function replaceMedia(text, medias) {
|
||||||
|
return text.replace(mediaRegex, (match, id) => {
|
||||||
|
const mediaKey = `m${id}`;
|
||||||
|
if (medias[mediaKey]) {
|
||||||
|
const [type, url, width, height] = medias[mediaKey];
|
||||||
|
if (type === 'image') {
|
||||||
|
return `<img src="${url}" width="${width}" height="${height}" alt="Question Image" />`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const processedText = computed(() => replaceMedia(props.text, props.medias));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.question-text {
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-text img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
374
src/pages/demoPages/podExercise/Quiz.vue
Normal file
374
src/pages/demoPages/podExercise/Quiz.vue
Normal file
@ -0,0 +1,374 @@
|
|||||||
|
<template>
|
||||||
|
<div class="quiz-container">
|
||||||
|
<!-- 加载中提示 -->
|
||||||
|
<div v-if="isLoading" class="loading">加载中...</div>
|
||||||
|
|
||||||
|
<!-- 当前题目 -->
|
||||||
|
<div v-else-if="currentQuestion" class="question-container">
|
||||||
|
<h2>题目 {{ questionCount }}</h2>
|
||||||
|
<QuestionText :text="currentQuestion.text" :medias="data.medias" />
|
||||||
|
<div class="options">
|
||||||
|
<div v-for="(answer, idx) in currentQuestion.answers.slice(1)" :key="idx" class="option">
|
||||||
|
<label :class="{ 'correct': submitted && idx === correctIndex, 'incorrect': submitted && userAnswer === idx && idx !== correctIndex }">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
:value="idx"
|
||||||
|
v-model="userAnswer"
|
||||||
|
:name="'question'"
|
||||||
|
:disabled="submitted"
|
||||||
|
/>
|
||||||
|
<span v-html="processMedia(answer, data.medias)"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 提交按钮或下一题按钮 -->
|
||||||
|
<button v-if="!submitted" @click="submitAnswer" class="submit-btn">提交答案</button>
|
||||||
|
<button v-else @click="nextQuestion" class="next-btn">下一题</button>
|
||||||
|
|
||||||
|
<!-- 答题结果和解析 -->
|
||||||
|
<div v-if="submitted" class="result">
|
||||||
|
<p v-if="isCorrect" class="correct-text">答对了！</p>
|
||||||
|
<p v-else class="incorrect-text">答错了。</p>
|
||||||
|
<p>正确答案是：<span v-html="processMedia(correctAnswerText, data.medias)"></span></p>
|
||||||
|
<div v-if="currentQuestion.explanation" class="explanation">
|
||||||
|
<h3>解题思路</h3>
|
||||||
|
<div v-html="processMedia(currentQuestion.explanation, data.medias)"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 类似题目对比 -->
|
||||||
|
<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>
|
||||||
|
<QuestionText :text="similar.text" :medias="data.medias" />
|
||||||
|
<p>正确答案：<span v-html="processMedia(similar.correctAnswer, data.medias)"></span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 进度条 -->
|
||||||
|
<div v-if="!isLoading" class="progress-bar">
|
||||||
|
<div
|
||||||
|
class="progress"
|
||||||
|
:style="{
|
||||||
|
width: `${progressPercentage}%`,
|
||||||
|
background: `linear-gradient(to right, red, yellow, green ${progressPercentage}%, transparent ${progressPercentage}%)`
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ progressPercentage.toFixed(1) }}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref, onMounted, computed } from 'vue';
|
||||||
|
import axios from 'axios';
|
||||||
|
import QuestionText from './QuestionText.vue';
|
||||||
|
|
||||||
|
// 响应式数据存储 JSON
|
||||||
|
const data = reactive({
|
||||||
|
itemtypes: [],
|
||||||
|
texts: [],
|
||||||
|
explanations: [],
|
||||||
|
gradings: [],
|
||||||
|
answerkeys: [],
|
||||||
|
answers: [],
|
||||||
|
medias: {}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 当前题目、用户答案、状态变量
|
||||||
|
const currentQuestion = ref(null);
|
||||||
|
const userAnswer = ref(null);
|
||||||
|
const submitted = ref(false);
|
||||||
|
const isCorrect = ref(false);
|
||||||
|
const correctAnswerText = ref('');
|
||||||
|
const correctIndex = ref(null);
|
||||||
|
const isLoading = ref(true);
|
||||||
|
const questionCount = ref(1);
|
||||||
|
const similarQuestions = ref([]); // 类似题目数组
|
||||||
|
|
||||||
|
// 最近20题的答题记录
|
||||||
|
const recentResults = ref([]);
|
||||||
|
|
||||||
|
// 进度条百分比
|
||||||
|
const progressPercentage = computed(() => {
|
||||||
|
if (recentResults.value.length === 0) return 0;
|
||||||
|
const correctCount = recentResults.value.filter(result => result).length;
|
||||||
|
return (correctCount / Math.min(recentResults.value.length, 20)) * 100;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载数据
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
const response = await axios.get('https://mva-cyber.club/data/file/phy250226.json');
|
||||||
|
const jsonData = response.data;
|
||||||
|
Object.assign(data, jsonData);
|
||||||
|
|
||||||
|
// 随机选择第一道题
|
||||||
|
selectRandomQuestion();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载数据失败:', error);
|
||||||
|
alert('数据加载失败，请稍后重试。');
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 随机选择一道题
|
||||||
|
function selectRandomQuestion() {
|
||||||
|
if (data.texts.length <= 1) return;
|
||||||
|
const index = Math.floor(Math.random() * (data.texts.length - 1)) + 1;
|
||||||
|
currentQuestion.value = {
|
||||||
|
text: data.texts[index],
|
||||||
|
answers: data.answers[index],
|
||||||
|
answerkeys: data.answerkeys[index],
|
||||||
|
explanation: data.explanations[index],
|
||||||
|
type: data.itemtypes[index] // 保存题目类型用于查找相似题目
|
||||||
|
};
|
||||||
|
userAnswer.value = null;
|
||||||
|
submitted.value = false;
|
||||||
|
similarQuestions.value = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理媒体标签
|
||||||
|
function processMedia(text, medias) {
|
||||||
|
if (!text) return '';
|
||||||
|
const mediaRegex = /<media i(\d+)>/g;
|
||||||
|
return text.replace(mediaRegex, (match, id) => {
|
||||||
|
const mediaKey = `m${id}`;
|
||||||
|
if (medias[mediaKey]) {
|
||||||
|
const [type, url, width, height] = medias[mediaKey];
|
||||||
|
if (type === 'image') {
|
||||||
|
return `<img src="${url}" width="${width}" height="${height}" alt="Question Image" />`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function calculateStringSimilarity(str1, str2) {
|
||||||
|
// 处理空字符串或非字符串输入
|
||||||
|
if (typeof str1 !== 'string' || typeof str2 !== 'string') {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果两个字符串完全相同，直接返回100%
|
||||||
|
if (str1 === str2) {
|
||||||
|
return 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取字符串长度
|
||||||
|
const len1 = str1.length;
|
||||||
|
const len2 = str2.length;
|
||||||
|
|
||||||
|
// 如果任一字符串为空，返回0%
|
||||||
|
if (len1 === 0 || len2 === 0) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建二维数组
|
||||||
|
const matrix = Array(len2 + 1).fill(null).map(() =>
|
||||||
|
Array(len1 + 1).fill(null)
|
||||||
|
);
|
||||||
|
|
||||||
|
// 初始化第一行和第一列
|
||||||
|
for (let i = 0; i <= len1; i++) {
|
||||||
|
matrix[0][i] = i;
|
||||||
|
}
|
||||||
|
for (let j = 0; j <= len2; j++) {
|
||||||
|
matrix[j][0] = j;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 填充矩阵
|
||||||
|
for (let j = 1; j <= len2; j++) {
|
||||||
|
for (let i = 1; i <= len1; i++) {
|
||||||
|
const indicator = str1[i - 1] === str2[j - 1] ? 0 : 1;
|
||||||
|
matrix[j][i] = Math.min(
|
||||||
|
matrix[j][i - 1] + 1, // 删除
|
||||||
|
matrix[j - 1][i] + 1, // 插入
|
||||||
|
matrix[j - 1][i - 1] + indicator // 替换
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算相似度百分比
|
||||||
|
const maxLength = Math.max(len1, len2);
|
||||||
|
const levenshteinDistance = matrix[len2][len1];
|
||||||
|
const similarity = ((maxLength - levenshteinDistance) / maxLength) * 100;
|
||||||
|
|
||||||
|
// 返回保留两位小数的百分比
|
||||||
|
return Number(similarity.toFixed(2));
|
||||||
|
}
|
||||||
|
// 查找类似题目
|
||||||
|
function findSimilarQuestions() {
|
||||||
|
const currentText = currentQuestion.value.text;
|
||||||
|
const similar = [];
|
||||||
|
for (let i = 1; i < data.itemtypes.length; i++) {
|
||||||
|
console.log(calculateStringSimilarity(data.texts[i], currentText), {1: data.texts[i]})
|
||||||
|
if (
|
||||||
|
calculateStringSimilarity(data.texts[i], currentText) > 80 && // 相似度
|
||||||
|
data.texts[i] !== currentQuestion.value.text// 不是当前题目
|
||||||
|
// similar.length < 2 // 最多选 2 道
|
||||||
|
) {
|
||||||
|
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]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
similarQuestions.value = similar;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交答案
|
||||||
|
function submitAnswer() {
|
||||||
|
if (userAnswer.value === null) {
|
||||||
|
alert('请选择一个答案！');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
correctIndex.value = currentQuestion.value.answerkeys.findIndex((key, idx) => idx > 0 && key === 1) - 1;
|
||||||
|
isCorrect.value = userAnswer.value === correctIndex.value;
|
||||||
|
correctAnswerText.value = currentQuestion.value.answers[correctIndex.value + 1];
|
||||||
|
submitted.value = true;
|
||||||
|
|
||||||
|
// 更新最近20题记录
|
||||||
|
recentResults.value.push(isCorrect.value);
|
||||||
|
if (recentResults.value.length > 20) {
|
||||||
|
recentResults.value.shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查找类似题目
|
||||||
|
findSimilarQuestions();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下一题
|
||||||
|
function nextQuestion() {
|
||||||
|
questionCount.value++;
|
||||||
|
selectRandomQuestion();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.quiz-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 20px auto;
|
||||||
|
height: calc(100vh - 110px);
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-container {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
margin-top: 20px;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: width 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option input {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option label.correct {
|
||||||
|
color: green;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option label.incorrect {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn,
|
||||||
|
.next-btn {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #007bff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:hover,
|
||||||
|
.next-btn:hover {
|
||||||
|
background-color: #0056b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.correct-text {
|
||||||
|
color: green;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.incorrect-text {
|
||||||
|
color: red;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explanation {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explanation h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.similar-questions {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
border-top: 1px dashed #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.similar-question {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.similar-question h4 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -15,6 +15,7 @@ import Account_admin_userManage from "../pages/accountPages/Account_admin_userMa
|
|||||||
import Projects from "../pages/Projects_home.vue";
|
import Projects from "../pages/Projects_home.vue";
|
||||||
import Demos_home from "../pages/Demos_home.vue";
|
import Demos_home from "../pages/Demos_home.vue";
|
||||||
import Board_page from "../pages/demoPages/messageBoard/Board_page.vue";
|
import Board_page from "../pages/demoPages/messageBoard/Board_page.vue";
|
||||||
|
import Pod_page from "../pages/demoPages/podExercise/Quiz.vue";
|
||||||
import Tools_home from "../pages/Tools_home.vue";
|
import Tools_home from "../pages/Tools_home.vue";
|
||||||
import GpaCalculator_page from "../pages/toolPages/gpaCalculator/gpaCalculator_page.vue";
|
import GpaCalculator_page from "../pages/toolPages/gpaCalculator/gpaCalculator_page.vue";
|
||||||
import About from "../pages/About.vue";
|
import About from "../pages/About.vue";
|
||||||
@ -44,6 +45,7 @@ const routes = [
|
|||||||
children: [
|
children: [
|
||||||
{path: "1", component: Board_page},
|
{path: "1", component: Board_page},
|
||||||
{path: "board", component: Board_page},
|
{path: "board", component: Board_page},
|
||||||
|
{path: "pod", component: Pod_page}
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
path: '/tools',
|
path: '/tools',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user