Add fullscreen toggle and answer summaries

frontend/components.d.ts

@@ -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']

frontend/src/layouts/QuizLayout.vue

@@ -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>

frontend/src/views/app/QuizView.vue

@@ -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--wrong),
-.option-list :deep(.option--right .el-checkbox__inner) {
+.option-list :deep(.option--picked-wrong) {
-  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) {
   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,
+    transform 160ms ease,
-    opacity 180ms ease;
+    opacity 130ms ease;
 }
 
 .slide-next-enter-from,