add fills

2026-04-23 13:48:36 -06:00
parent f00dab9c6d
commit 30f71c5db2
13 changed files with 435 additions and 83 deletions
--- a/src/oj/learn/components/ExerciseFill.vue
+++ b/src/oj/learn/components/ExerciseFill.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import hljs from "highlight.js/lib/core"
+import python from "highlight.js/lib/languages/python"
+import c from "highlight.js/lib/languages/c"
+import { Exercise, ExerciseFillData } from "utils/types"
+
+hljs.registerLanguage("python", python)
+hljs.registerLanguage("c", c)
+
+const props = defineProps<{ exercise: Exercise; lang?: string }>()
+const data = computed(() => props.exercise.data as ExerciseFillData)
+
+type CodeSeg = { type: "code"; html: string }
+type BlankSeg = { type: "blank"; answers: string[]; index: number }
+type Segment = CodeSeg | BlankSeg
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+}
+
+const segments = computed<Segment[]>(() => {
+  const blanks: string[][] = []
+  const markedCode = data.value.code.replace(/\{\{([^}]+)\}\}/g, (_, inner) => {
+    blanks.push(inner.split("|"))
+    return `____${blanks.length - 1}____`
+  })
+
+  const lang =
+    props.lang === "python" ? "python" : props.lang === "c" ? "c" : null
+  let highlighted: string
+  if (lang) {
+    try {
+      highlighted = hljs.highlight(markedCode, { language: lang }).value
+    } catch {
+      highlighted = escapeHtml(markedCode)
+    }
+  } else {
+    highlighted = escapeHtml(markedCode)
+  }
+
+  const parts = highlighted.split(/____(\d+)____/)
+  const result: Segment[] = []
+  for (let i = 0; i < parts.length; i++) {
+    if (i % 2 === 0) {
+      if (parts[i]) result.push({ type: "code", html: parts[i] })
+    } else {
+      const idx = parseInt(parts[i])
+      result.push({ type: "blank", answers: blanks[idx], index: idx })
+    }
+  }
+  return result
+})
+
+const blankCount = computed(
+  () => segments.value.filter((s) => s.type === "blank").length,
+)
+const userInputs = ref<string[]>([])
+const wrongBlanks = ref<Set<number>>(new Set())
+const allCorrect = ref(false)
+
+watch(() => props.exercise.id, reset, { immediate: true })
+
+function reset() {
+  userInputs.value = Array(blankCount.value).fill("")
+  wrongBlanks.value = new Set()
+  allCorrect.value = false
+}
+
+function submit() {
+  if (allCorrect.value) return
+  const wrong = new Set<number>()
+  for (const seg of segments.value) {
+    if (seg.type !== "blank") continue
+    if (!seg.answers.includes(userInputs.value[seg.index]?.trim() ?? "")) {
+      wrong.add(seg.index)
+    }
+  }
+  wrongBlanks.value = wrong
+  allCorrect.value = wrong.size === 0
+}
+
+function inputWidth(idx: number): string {
+  return Math.max(4, (userInputs.value[idx]?.length ?? 0) + 2) + "ch"
+}
+</script>
+
+<template>
+  <n-card
+    size="small"
+    style="margin: 16px 0; border: 1.5px solid var(--n-border-color)"
+  >
+    <template #header>
+      <n-tag type="warning" size="small" :bordered="false"
+        >练一练 · 代码填空</n-tag
+      >
+    </template>
+
+    <p style="font-weight: 500; margin-bottom: 12px">{{ data.question }}</p>
+
+    <pre
+      :style="{
+        fontFamily: 'monospace',
+        lineHeight: '1.6',
+        background: 'var(--n-color)',
+        border: '1px solid var(--n-border-color)',
+        borderRadius: '6px',
+        padding: '12px',
+        overflowX: 'auto',
+        whiteSpace: 'pre-wrap',
+        margin: 0,
+      }"
+    ><template v-for="(seg, i) in segments" :key="i"
+      ><span v-if="seg.type === 'code'" v-html="seg.html" /><input
+        v-else
+        :value="userInputs[seg.index]"
+        :disabled="allCorrect"
+        :style="{
+          width: inputWidth(seg.index),
+          fontFamily: 'monospace',
+          padding: '1px 4px',
+          borderRadius: '3px',
+          border: `1.5px solid ${
+            allCorrect
+              ? '#18a058'
+              : wrongBlanks.has(seg.index)
+                ? '#d03050'
+                : 'var(--n-border-color)'
+          }`,
+          background: allCorrect
+            ? 'rgba(24,160,88,0.08)'
+            : wrongBlanks.has(seg.index)
+              ? 'rgba(208,48,80,0.07)'
+              : 'transparent',
+          outline: 'none',
+          color: 'inherit',
+          minWidth: '4ch',
+        }"
+        @input="userInputs[seg.index] = ($event.target as HTMLInputElement).value"
+      /></template></pre>
+
+    <n-alert
+      v-if="wrongBlanks.size > 0 || allCorrect"
+      :type="allCorrect ? 'success' : 'error'"
+      :title="allCorrect ? '全部正确！' : '有填写错误，请检查红色标注的空位'"
+      style="margin-top: 12px"
+    />
+
+    <n-space style="margin-top: 12px" :size="8">
+      <n-button
+        type="warning"
+        size="small"
+        :disabled="allCorrect"
+        @click="submit"
+      >
+        提交
+      </n-button>
+      <n-button size="small" @click="reset">重置</n-button>
+    </n-space>
+  </n-card>
+</template>
--- a/src/oj/learn/components/ExerciseMcq.vue
+++ b/src/oj/learn/components/ExerciseMcq.vue
@@ -39,10 +39,15 @@ function optionType(idx: number): "default" | "primary" | "success" {
 </script>

 <template>
-  <n-card size="small" style="margin: 16px 0; border: 1.5px solid var(--n-border-color)">
+  <n-card
+    size="small"
+    style="margin: 16px 0; border: 1.5px solid var(--n-border-color)"
+  >
    <template #header>
      <n-space align="center" :size="8">
-        <n-tag type="success" size="small" :bordered="false">练一练 · 选择题</n-tag>
+        <n-tag type="success" size="small" :bordered="false"
+          >练一练 · 选择题</n-tag
+        >
      </n-space>
    </template>

@@ -56,11 +61,17 @@ function optionType(idx: number): "default" | "primary" | "success" {
        :secondary="optionType(idx) !== 'default'"
        :tertiary="optionType(idx) === 'default'"
        :strong="idx === selected"
-        :style="{ justifyContent: 'flex-start', width: '100%', textAlign: 'left' }"
+        :style="{
+          justifyContent: 'flex-start',
+          width: '100%',
+          textAlign: 'left',
+        }"
        @click="select(idx)"
      >
        <template #icon>
-          <span style="font-weight: 700">{{ String.fromCharCode(65 + idx) }}</span>
+          <span style="font-weight: 700">{{
+            String.fromCharCode(65 + idx)
+          }}</span>
        </template>
        {{ opt }}
      </n-button>
--- a/src/oj/learn/components/ExerciseSort.vue
+++ b/src/oj/learn/components/ExerciseSort.vue
@@ -27,7 +27,9 @@ function shuffle(arr: LineItem[]): LineItem[] {
 }

 function init() {
-  lines.value = shuffle(data.value.lines.map((text, idx) => ({ originalIdx: idx, text })))
+  lines.value = shuffle(
+    data.value.lines.map((text, idx) => ({ originalIdx: idx, text })),
+  )
  submitted.value = false
 }

@@ -55,7 +57,9 @@ function lineStatus(idx: number): "correct" | "wrong" | "default" {
  return lines.value[idx].originalIdx === idx ? "correct" : "wrong"
 }

-const allCorrect = computed(() => lines.value.every((item, i) => item.originalIdx === i))
+const allCorrect = computed(() =>
+  lines.value.every((item, i) => item.originalIdx === i),
+)

 function submit() {
  submitted.value = true
@@ -72,11 +76,14 @@ function escapeHtml(text: string): string {
 const lineHtmlMap = computed<Record<number, string>>(() => {
  const rawLines = data.value.lines
  const map: Record<number, string> = {}
-  const lang = props.lang === "python" ? "python" : props.lang === "c" ? "c" : null
+  const lang =
+    props.lang === "python" ? "python" : props.lang === "c" ? "c" : null

  if (lang) {
    try {
-      const result = hljs.highlight(rawLines.join("\n"), { language: lang }).value
+      const result = hljs.highlight(rawLines.join("\n"), {
+        language: lang,
+      }).value
      result.split("\n").forEach((html, i) => {
        map[i] = html
      })
@@ -94,9 +101,14 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
 </script>

 <template>
-  <n-card size="small" style="margin: 16px 0; border: 1.5px solid var(--n-border-color)">
+  <n-card
+    size="small"
+    style="margin: 16px 0; border: 1.5px solid var(--n-border-color)"
+  >
    <template #header>
-      <n-tag type="info" size="small" :bordered="false">练一练 · 代码排序</n-tag>
+      <n-tag type="info" size="small" :bordered="false"
+        >练一练 · 代码排序</n-tag
+      >
    </template>

    <p style="font-weight: 500; margin-bottom: 12px">{{ data.question }}</p>
@@ -127,7 +139,6 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
                : 'transparent',
          cursor: 'grab',
          fontFamily: 'monospace',
-          fontSize: '13px',
          userSelect: 'none',
        }"
        @dragstart="onDragStart(idx)"
@@ -147,7 +158,12 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
    />

    <n-space style="margin-top: 12px" :size="8">
-      <n-button type="info" size="small" :disabled="submitted && allCorrect" @click="submit">
+      <n-button
+        type="info"
+        size="small"
+        :disabled="submitted && allCorrect"
+        @click="submit"
+      >
        提交
      </n-button>
      <n-button size="small" @click="reset">重置</n-button>
@@ -158,29 +174,51 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
 <style>
 .hljs-keyword,
 .hljs-operator,
-.hljs-selector-tag { color: #d73a49; }
+.hljs-selector-tag {
+  color: #d73a49;
+}
 .hljs-string,
 .hljs-regexp,
-.hljs-template-literal { color: #032f62; }
+.hljs-template-literal {
+  color: #032f62;
+}
 .hljs-comment,
-.hljs-quote { color: #6a737d; font-style: italic; }
+.hljs-quote {
+  color: #6a737d;
+  font-style: italic;
+}
 .hljs-number,
-.hljs-literal { color: #005cc5; }
+.hljs-literal {
+  color: #005cc5;
+}
 .hljs-built_in,
 .hljs-title.function_,
-.hljs-class .hljs-title { color: #6f42c1; }
+.hljs-class .hljs-title {
+  color: #6f42c1;
+}

 .dark .hljs-keyword,
 .dark .hljs-operator,
-.dark .hljs-selector-tag { color: #c678dd; }
+.dark .hljs-selector-tag {
+  color: #c678dd;
+}
 .dark .hljs-string,
 .dark .hljs-regexp,
-.dark .hljs-template-literal { color: #98c379; }
+.dark .hljs-template-literal {
+  color: #98c379;
+}
 .dark .hljs-comment,
-.dark .hljs-quote { color: #7f848e; font-style: italic; }
+.dark .hljs-quote {
+  color: #7f848e;
+  font-style: italic;
+}
 .dark .hljs-number,
-.dark .hljs-literal { color: #e5c07b; }
+.dark .hljs-literal {
+  color: #e5c07b;
+}
 .dark .hljs-built_in,
 .dark .hljs-title.function_,
-.dark .hljs-class .hljs-title { color: #61afef; }
+.dark .hljs-class .hljs-title {
+  color: #61afef;
+}
 </style>
--- a/src/oj/learn/components/ExerciseWidget.vue
+++ b/src/oj/learn/components/ExerciseWidget.vue
@@ -3,11 +3,21 @@ import { Exercise } from "utils/types"

 const ExerciseMcq = defineAsyncComponent(() => import("./ExerciseMcq.vue"))
 const ExerciseSort = defineAsyncComponent(() => import("./ExerciseSort.vue"))
+const ExerciseFill = defineAsyncComponent(() => import("./ExerciseFill.vue"))

 defineProps<{ exercise: Exercise; lang?: string }>()
 </script>

 <template>
  <ExerciseMcq v-if="exercise.type === 'mcq'" :exercise="exercise" />
-  <ExerciseSort v-else-if="exercise.type === 'sort'" :exercise="exercise" :lang="lang" />
+  <ExerciseSort
+    v-else-if="exercise.type === 'sort'"
+    :exercise="exercise"
+    :lang="lang"
+  />
+  <ExerciseFill
+    v-else-if="exercise.type === 'fill'"
+    :exercise="exercise"
+    :lang="lang"
+  />
 </template>