Add fullscreen toggle and answer summaries
This commit is contained in:
parent
a8095be4d8
commit
64745ad9ae
1
frontend/components.d.ts
vendored
1
frontend/components.d.ts
vendored
@ -38,6 +38,7 @@ declare module 'vue' {
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
ElTree: typeof import('element-plus/es')['ElTree']
|
||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
|
||||
@ -1,11 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, shallowRef } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import { Collection, Setting, SwitchButton } from '@element-plus/icons-vue'
|
||||
import { Collection, FullScreen, ScaleToOriginal, Setting, SwitchButton } from '@element-plus/icons-vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const fullscreen = shallowRef(false)
|
||||
const fullscreenIcon = computed(() => (fullscreen.value ? ScaleToOriginal : FullScreen))
|
||||
const fullscreenTitle = computed(() => (fullscreen.value ? '退出全屏' : '全屏'))
|
||||
|
||||
function syncFullscreenState() {
|
||||
fullscreen.value = Boolean(document.fullscreenElement)
|
||||
}
|
||||
|
||||
async function toggleFullscreen() {
|
||||
if (document.fullscreenElement) {
|
||||
await document.exitFullscreen()
|
||||
return
|
||||
}
|
||||
await document.documentElement.requestFullscreen()
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
try {
|
||||
@ -20,6 +36,15 @@ async function logout() {
|
||||
auth.clearSession()
|
||||
await router.replace('/login')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
syncFullscreenState()
|
||||
document.addEventListener('fullscreenchange', syncFullscreenState)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('fullscreenchange', syncFullscreenState)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -30,6 +55,9 @@ async function logout() {
|
||||
<span>QuickQuiz</span>
|
||||
</button>
|
||||
<div class="quiz-actions">
|
||||
<ElTooltip :content="fullscreenTitle" placement="bottom">
|
||||
<ElButton :icon="fullscreenIcon" circle @click="toggleFullscreen" />
|
||||
</ElTooltip>
|
||||
<ElButton :icon="Setting" circle @click="router.push('/admin')" />
|
||||
<ElButton :icon="SwitchButton" circle @click="logout" />
|
||||
</div>
|
||||
|
||||
@ -50,14 +50,62 @@ const showConfirmAnswer = computed(() => quiz.attempt?.status === 'in_progress'
|
||||
const optionsLocked = computed(() => quiz.attempt?.status !== 'in_progress' || showAnswer.value)
|
||||
const isFirstQuestion = computed(() => quiz.currentIndex === 0)
|
||||
const isLastQuestion = computed(() => !quiz.attempt || quiz.currentIndex >= quiz.attempt.items.length - 1)
|
||||
const isAnsweredWrong = computed(() => item.value?.is_correct === false)
|
||||
const answerPanelClass = computed(() => ({
|
||||
'answer-panel--wrong': isAnsweredWrong.value,
|
||||
}))
|
||||
const selectedOptionLabels = computed(() => optionLabels(selected.value))
|
||||
const correctOptionLabels = computed(() => {
|
||||
if (!item.value) return []
|
||||
|
||||
return item.value.question.options
|
||||
.filter((option) => option.is_correct)
|
||||
.map((option) => optionLabelById(option.id))
|
||||
})
|
||||
const selectedAnswerText = computed(() => selectedOptionLabels.value.length > 0 ? selectedOptionLabels.value.join('、') : '未选择')
|
||||
const correctAnswerText = computed(() => {
|
||||
if (!item.value) return ''
|
||||
if (item.value.question.type === 'blank') return item.value.question.answers?.join('、') || '暂无标准答案'
|
||||
|
||||
return correctOptionLabels.value.join('、') || '暂无标准答案'
|
||||
})
|
||||
|
||||
function optionClass(option: { id: number; is_correct: boolean }) {
|
||||
if (!showAnswer.value) return ''
|
||||
const selectedIds = selected.value.map(String)
|
||||
const isSelected = selectedIds.includes(String(option.id))
|
||||
if (option.is_correct) return 'option--right'
|
||||
if (selected.value.map(String).includes(String(option.id))) return 'option--wrong'
|
||||
if (isMultiple.value && isSelected) return 'option--picked-wrong'
|
||||
if (isSelected) return 'option--wrong'
|
||||
return ''
|
||||
}
|
||||
|
||||
function optionLabelById(optionId: number | string) {
|
||||
const optionIndex = item.value?.question.options.findIndex((option) => String(option.id) === String(optionId)) ?? -1
|
||||
if (optionIndex < 0) return String(optionId)
|
||||
|
||||
return optionLabelByIndex(optionIndex)
|
||||
}
|
||||
|
||||
function optionLabels(values: Array<number | string>) {
|
||||
if (!item.value) return values.map(String)
|
||||
|
||||
const selectedIds = new Set(values.map(String))
|
||||
const orderedLabels = item.value.question.options
|
||||
.map((option, index) => ({ option, index }))
|
||||
.filter(({ option }) => selectedIds.has(String(option.id)))
|
||||
.map(({ index }) => optionLabelByIndex(index))
|
||||
|
||||
const knownIds = new Set(item.value.question.options.map((option) => String(option.id)))
|
||||
const unknownLabels = values.filter((value) => !knownIds.has(String(value))).map(String)
|
||||
|
||||
return [...orderedLabels, ...unknownLabels]
|
||||
}
|
||||
|
||||
function optionLabelByIndex(index: number) {
|
||||
return String.fromCharCode(65 + index)
|
||||
}
|
||||
|
||||
function syncLocalAnswer() {
|
||||
selected.value = (quiz.currentItem?.answer ?? []) as Array<number | string>
|
||||
blankAnswer.value = String(selected.value[0] ?? '')
|
||||
@ -224,14 +272,15 @@ watch(remainingSeconds, async (value) => {
|
||||
|
||||
<ElCheckboxGroup v-if="isMultiple" :model-value="displaySelected" class="option-list" @change="updateSelected">
|
||||
<ElCheckbox
|
||||
v-for="option in item.question.options"
|
||||
v-for="(option, optionIndex) in item.question.options"
|
||||
:key="option.id"
|
||||
:value="option.id"
|
||||
:class="optionClass(option)"
|
||||
:disabled="optionsLocked"
|
||||
border
|
||||
>
|
||||
{{ option.content }}
|
||||
<span class="option-index">{{ optionLabelByIndex(optionIndex) }}</span>
|
||||
<span class="option-content">{{ option.content }}</span>
|
||||
</ElCheckbox>
|
||||
</ElCheckboxGroup>
|
||||
<ElInput
|
||||
@ -245,7 +294,7 @@ watch(remainingSeconds, async (value) => {
|
||||
/>
|
||||
<ElRadioGroup v-else :model-value="singleDisplaySelected" class="option-list">
|
||||
<ElRadio
|
||||
v-for="option in item.question.options"
|
||||
v-for="(option, optionIndex) in item.question.options"
|
||||
:key="option.id"
|
||||
:value="option.id"
|
||||
:class="optionClass(option)"
|
||||
@ -253,12 +302,19 @@ watch(remainingSeconds, async (value) => {
|
||||
border
|
||||
@click="selectSingle(option.id)"
|
||||
>
|
||||
{{ option.content }}
|
||||
<span class="option-index">{{ optionLabelByIndex(optionIndex) }}</span>
|
||||
<span class="option-content">{{ option.content }}</span>
|
||||
</ElRadio>
|
||||
</ElRadioGroup>
|
||||
|
||||
<section v-if="showAnswer" class="answer-panel">
|
||||
<section v-if="showAnswer" class="answer-panel" :class="answerPanelClass">
|
||||
<strong>答案与解析</strong>
|
||||
<p v-if="item.question.type !== 'blank'" class="answer-summary">
|
||||
你选的：{{ selectedAnswerText }}，正确答案是 {{ correctAnswerText }}
|
||||
</p>
|
||||
<p v-else class="answer-summary">
|
||||
你填的：{{ blankAnswer || '未填写' }}
|
||||
</p>
|
||||
<p v-if="item.question.type === 'blank'">正确答案：{{ item.question.answers?.join('、') || '暂无标准答案' }}</p>
|
||||
<p>{{ item.question.explanation || '暂无解析' }}</p>
|
||||
</section>
|
||||
@ -394,9 +450,21 @@ watch(remainingSeconds, async (value) => {
|
||||
height: auto;
|
||||
min-height: 48px;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.option-list :deep(.el-checkbox__input),
|
||||
.option-list :deep(.el-radio__input) {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.option-list :deep(.el-radio.is-disabled),
|
||||
.option-list :deep(.el-checkbox.is-disabled) {
|
||||
cursor: default;
|
||||
@ -408,6 +476,35 @@ watch(remainingSeconds, async (value) => {
|
||||
color: var(--qq-ink);
|
||||
}
|
||||
|
||||
.option-list :deep(.el-radio__label),
|
||||
.option-list :deep(.el-checkbox__label) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.option-index {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
border-radius: 8px;
|
||||
background: rgba(31, 111, 91, 0.08);
|
||||
color: var(--qq-moss);
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.option-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.option-list :deep(.option--right) {
|
||||
border-color: rgba(31, 111, 91, 0.58);
|
||||
background: rgba(31, 111, 91, 0.1);
|
||||
@ -419,28 +516,17 @@ watch(remainingSeconds, async (value) => {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.option-list :deep(.option--right .el-radio__inner),
|
||||
.option-list :deep(.option--right .el-checkbox__inner) {
|
||||
border-color: #1f6f5b;
|
||||
background: #1f6f5b;
|
||||
}
|
||||
|
||||
.option-list :deep(.option--right .el-radio__inner::after) {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
.option-list :deep(.option--right .el-checkbox__inner::after) {
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
|
||||
.option-list :deep(.option--wrong) {
|
||||
.option-list :deep(.option--wrong),
|
||||
.option-list :deep(.option--picked-wrong) {
|
||||
border-color: rgba(201, 133, 34, 0.58);
|
||||
background: rgba(201, 133, 34, 0.1);
|
||||
}
|
||||
|
||||
.option-list :deep(.option--wrong .el-radio__label),
|
||||
.option-list :deep(.option--wrong .el-checkbox__label) {
|
||||
.option-list :deep(.option--wrong .el-checkbox__label),
|
||||
.option-list :deep(.option--picked-wrong .el-checkbox__label) {
|
||||
color: #9a5f10;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.answer-panel {
|
||||
@ -451,10 +537,20 @@ watch(remainingSeconds, async (value) => {
|
||||
background: rgba(31, 111, 91, 0.07);
|
||||
}
|
||||
|
||||
.answer-panel--wrong {
|
||||
border-color: rgba(201, 133, 34, 0.42);
|
||||
background: rgba(201, 133, 34, 0.12);
|
||||
}
|
||||
|
||||
.answer-panel p {
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
.answer-summary {
|
||||
color: var(--qq-ink);
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.quiz-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@ -536,8 +632,8 @@ watch(remainingSeconds, async (value) => {
|
||||
.slide-prev-enter-active,
|
||||
.slide-prev-leave-active {
|
||||
transition:
|
||||
transform 220ms ease,
|
||||
opacity 180ms ease;
|
||||
transform 160ms ease,
|
||||
opacity 130ms ease;
|
||||
}
|
||||
|
||||
.slide-next-enter-from,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user