测试新实例
This commit is contained in:
parent
cf39de10d8
commit
9926056f71
@ -10,7 +10,8 @@ import { marked } from "marked";
|
||||
const props = defineProps({
|
||||
contentInput: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: '',
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -206,6 +206,7 @@ onMounted(() => {
|
||||
left: 50%;
|
||||
font-size: 70px;
|
||||
text-wrap: none;
|
||||
word-break: keep-all;
|
||||
opacity: 0.08;
|
||||
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 Demos_home from "../pages/Demos_home.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 GpaCalculator_page from "../pages/toolPages/gpaCalculator/gpaCalculator_page.vue";
|
||||
import About from "../pages/About.vue";
|
||||
@ -44,6 +45,7 @@ const routes = [
|
||||
children: [
|
||||
{path: "1", component: Board_page},
|
||||
{path: "board", component: Board_page},
|
||||
{path: "pod", component: Pod_page}
|
||||
]
|
||||
}, {
|
||||
path: '/tools',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user