@c2-markdown-ui/react 0.4.3 → 0.4.4

package/src/widgets/Quiz.tsx

@@ -1,320 +1,320 @@
-import React, { useState, useMemo } from 'react';
-import { parseChoices } from './choiceUtils';
-
-export interface QuizProps {
-  title: string;
-  questions: QuizQuestion[];
-  showScore?: boolean;
-  showProgress?: boolean;
-  passingScore?: number;
-  /** 是否禁用：级联禁用所有题目 */
-  disabled?: boolean;
-  onchange: (value: QuizState) => void;
-}
-
-interface QuizQuestion {
-  id: string;
-  type: "mcq" | "short-answer";
-  question: string;
-  points: number;
-  // MCQ specific
-  choices?: string[];
-  correctAnswer?: string;
-  // Short answer specific  
-  placeholder?: string;
-  correctAnswers?: string[];
-}
-
-interface QuizAnswer {
-  answer: string;
-  isCorrect: boolean;
-  points: number;
-  submitted: boolean;
-}
-
-interface QuizState {
-  answers: Record<string, QuizAnswer>;
-  totalScore: number;
-  maxScore: number;
-  questionsAnswered: number;
-  isCompleted: boolean;
-}
-
-export const Quiz: React.FC<QuizProps> = ({
-  title,
-  questions,
-  showScore = true,
-  showProgress = true,
-  passingScore,
-  disabled = false,
-  onchange
-}) => {
-  const [answers, setAnswers] = useState<Record<string, QuizAnswer>>({});
-  const [draftInputs, setDraftInputs] = useState<Record<string, string>>({});
-
-  const quizState = useMemo<QuizState>(() => {
-    const maxScore = questions.reduce((sum, q) => sum + q.points, 0);
-    const totalScore = Object.values(answers).reduce((sum, a) => sum + a.points, 0);
-    const questionsAnswered = Object.keys(answers).length;
-    const isCompleted = questionsAnswered === questions.length;
-
-    return {
-      answers,
-      totalScore,
-      maxScore,
-      questionsAnswered,
-      isCompleted
-    };
-  }, [answers, questions]);
-
-  const handleQuestionAnswer = (questionId: string, userAnswer: string) => {
-    if (disabled) return;
-    const question = questions.find(q => q.id === questionId);
-    if (!question || answers[questionId]?.submitted) return;
-
-    let isCorrect = false;
-    
-    if (question.type === "mcq") {
-      isCorrect = question.correctAnswer === userAnswer;
-    } else if (question.type === "short-answer") {
-      if (question.correctAnswers) {
-        isCorrect = question.correctAnswers.some(
-          correct => correct.toLowerCase() === userAnswer.toLowerCase()
-        );
-      }
-    }
-
-    const newAnswer: QuizAnswer = {
-      answer: userAnswer,
-      isCorrect,
-      points: isCorrect ? question.points : 0,
-      submitted: true
-    };
-
-    const newAnswers = { ...answers, [questionId]: newAnswer };
-    setAnswers(newAnswers);
-
-    // Trigger onChange with updated state
-    const updatedState = {
-      answers: newAnswers,
-      totalScore: Object.values(newAnswers).reduce((sum, a) => sum + a.points, 0),
-      maxScore: quizState.maxScore,
-      questionsAnswered: Object.keys(newAnswers).length,
-      isCompleted: Object.keys(newAnswers).length === questions.length
-    };
-
-    onchange(updatedState);
-  };
-
-  const getProgressPercentage = () => {
-    return Math.round((quizState.questionsAnswered / questions.length) * 100);
-  };
-
-  const getScorePercentage = () => {
-    return quizState.maxScore > 0 ? Math.round((quizState.totalScore / quizState.maxScore) * 100) : 0;
-  };
-
-  const isPassing = () => {
-    return passingScore ? getScorePercentage() >= passingScore : null;
-  };
-
-  const renderMCQQuestion = (question: QuizQuestion) => {
-    const answer = answers[question.id];
-    const isAnswered = answer?.submitted;
-    const hasCorrect = typeof question.correctAnswer !== 'undefined';
-    // mcq choices 支持 key:label 格式：value(key) 是取值，label 是展示文案
-    const items = parseChoices(question.choices ?? []);
-    // 反馈文案：correctAnswer 是 key，展示时映射回 label
-    const correctLabel = hasCorrect
-      ? (items.find(i => i.value === question.correctAnswer)?.label ?? question.correctAnswer as string)
-      : '';
-
-    return (
-      <div key={question.id} className="quiz-question">
-        <div className="quiz-question-header">
-          <h3 className="quiz-question-text">{question.question}</h3>
-          <span className="quiz-question-points">{question.points} pts</span>
-        </div>
-
-        <div className="quiz-choices">
-          {items.map((item, index) => {
-            let choiceClass = 'quiz-choice';
-
-            if (isAnswered && hasCorrect) {
-              if (item.value === question.correctAnswer) {
-                choiceClass += ' quiz-choice-correct';
-              } else if (item.value === answer.answer && item.value !== question.correctAnswer) {
-                choiceClass += ' quiz-choice-incorrect';
-              }
-            } else if (item.value === answer?.answer) {
-              choiceClass += ' quiz-choice-selected';
-            }
-
-            return (
-              <button
-                key={index}
-                className={choiceClass}
-                onClick={() => handleQuestionAnswer(question.id, item.value)}
-                disabled={disabled || isAnswered}
-              >
-                {item.label}
-              </button>
-            );
-          })}
-        </div>
-
-        {isAnswered && (
-          hasCorrect ? (
-            <div className={`quiz-feedback ${answer.isCorrect ? 'correct' : 'incorrect'}`}>
-              {answer.isCorrect
-                ? `✓ Correct! (+${answer.points} pts)`
-                : `✗ Incorrect. The correct answer is: ${correctLabel}`}
-            </div>
-          ) : (
-            <div className="quiz-feedback">
-              {`You selected: ${answer.answer}`}
-            </div>
-          )
-        )}
-      </div>
-    );
-  };
-
-  const renderShortAnswerQuestion = (question: QuizQuestion) => {
-    const answer = answers[question.id];
-    const isAnswered = answer?.submitted;
-    const hasAnswers = (question.correctAnswers && question.correctAnswers.length > 0) || false;
-    const inputValue = draftInputs[question.id] ?? '';
-
-    const handleSubmit = () => {
-      if (disabled) return;
-      if (!inputValue.trim() || isAnswered) return;
-      handleQuestionAnswer(question.id, inputValue.trim());
-      // Clear draft after submission
-      setDraftInputs(prev => {
-        const next = { ...prev };
-        delete next[question.id];
-        return next;
-      });
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' && !isAnswered && !disabled) {
-        handleSubmit();
-      }
-    };
-
-    return (
-      <div key={question.id} className="quiz-question">
-        <div className="quiz-question-header">
-          <h3 className="quiz-question-text">{question.question}</h3>
-          <span className="quiz-question-points">{question.points} pts</span>
-        </div>
-        
-        <div className="quiz-input-container">
-          <input
-            type="text"
-            value={isAnswered ? answer.answer : inputValue}
-            onChange={(e) => {
-              if (!isAnswered && !disabled) {
-                const val = e.target.value;
-                setDraftInputs(prev => ({ ...prev, [question.id]: val }));
-              }
-            }}
-            onKeyDown={handleKeyDown}
-            placeholder={question.placeholder || "Type your answer here..."}
-            disabled={disabled || isAnswered}
-            className={`quiz-input ${
-              isAnswered
-                ? hasAnswers
-                  ? (answer.isCorrect ? 'quiz-input-correct' : 'quiz-input-incorrect')
-                  : ''
-                : ''
-            }`}
-          />
-          {!isAnswered && (
-            <button
-              onClick={handleSubmit}
-              disabled={disabled || !inputValue.trim()}
-              className="quiz-submit"
-            >
-              Submit
-            </button>
-          )}
-        </div>
-
-        {isAnswered && (
-          hasAnswers ? (
-            <div className={`quiz-feedback ${answer.isCorrect ? 'correct' : 'incorrect'}`}>
-              {answer.isCorrect 
-                ? `✓ Correct! (+${answer.points} pts)` 
-                : `✗ Incorrect. Accepted answers: ${question.correctAnswers?.join(', ') || 'N/A'}`}
-            </div>
-          ) : (
-            <div className="quiz-feedback">
-              {`Your answer: ${answer.answer}`}
-            </div>
-          )
-        )}
-      </div>
-    );
-  };
-
-  return (
-    <div className="widget-quiz">
-      {/* Quiz Header */}
-      <div className="quiz-header">
-        <h2 className="quiz-title">{title}</h2>
-        
-        <div className="quiz-stats">
-          {showProgress && (
-            <div className="quiz-progress">
-              <span className="quiz-progress-text">
-                Progress: {quizState.questionsAnswered}/{questions.length} questions
-              </span>
-              <div className="quiz-progress-bar">
-                <div 
-                  className="quiz-progress-fill"
-                  style={{ width: `${getProgressPercentage()}%` }}
-                />
-              </div>
-            </div>
-          )}
-          
-          {showScore && (
-            <div className="quiz-score">
-              <span className="quiz-score-text">
-                Score: {quizState.totalScore}/{quizState.maxScore} ({getScorePercentage()}%)
-              </span>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Questions */}
-      <div className="quiz-questions">
-        {questions.map((question) => 
-          question.type === "mcq" 
-            ? renderMCQQuestion(question)
-            : renderShortAnswerQuestion(question)
-        )}
-      </div>
-
-      {/* Quiz Summary */}
-      {quizState.isCompleted && (
-        <div className="quiz-summary">
-          <h3>Quiz Complete!</h3>
-          <div className="quiz-final-score">
-            Final Score: {quizState.totalScore}/{quizState.maxScore} points ({getScorePercentage()}%)
-          </div>
-          {passingScore && (
-            <div className={`quiz-result ${isPassing() ? 'passed' : 'failed'}`}>
-              {isPassing() ? '🎉 Passed!' : '❌ Failed'} 
-              (Passing: {passingScore}%)
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
+import React, { useState, useMemo } from 'react';
+import { parseChoices } from './choiceUtils';
+
+export interface QuizProps {
+  title: string;
+  questions: QuizQuestion[];
+  showScore?: boolean;
+  showProgress?: boolean;
+  passingScore?: number;
+  /** 是否禁用：级联禁用所有题目 */
+  disabled?: boolean;
+  onchange: (value: QuizState) => void;
+}
+
+interface QuizQuestion {
+  id: string;
+  type: "mcq" | "short-answer";
+  question: string;
+  points: number;
+  // MCQ specific
+  choices?: string[];
+  correctAnswer?: string;
+  // Short answer specific  
+  placeholder?: string;
+  correctAnswers?: string[];
+}
+
+interface QuizAnswer {
+  answer: string;
+  isCorrect: boolean;
+  points: number;
+  submitted: boolean;
+}
+
+interface QuizState {
+  answers: Record<string, QuizAnswer>;
+  totalScore: number;
+  maxScore: number;
+  questionsAnswered: number;
+  isCompleted: boolean;
+}
+
+export const Quiz: React.FC<QuizProps> = ({
+  title,
+  questions,
+  showScore = true,
+  showProgress = true,
+  passingScore,
+  disabled = false,
+  onchange
+}) => {
+  const [answers, setAnswers] = useState<Record<string, QuizAnswer>>({});
+  const [draftInputs, setDraftInputs] = useState<Record<string, string>>({});
+
+  const quizState = useMemo<QuizState>(() => {
+    const maxScore = questions.reduce((sum, q) => sum + q.points, 0);
+    const totalScore = Object.values(answers).reduce((sum, a) => sum + a.points, 0);
+    const questionsAnswered = Object.keys(answers).length;
+    const isCompleted = questionsAnswered === questions.length;
+
+    return {
+      answers,
+      totalScore,
+      maxScore,
+      questionsAnswered,
+      isCompleted
+    };
+  }, [answers, questions]);
+
+  const handleQuestionAnswer = (questionId: string, userAnswer: string) => {
+    if (disabled) return;
+    const question = questions.find(q => q.id === questionId);
+    if (!question || answers[questionId]?.submitted) return;
+
+    let isCorrect = false;
+    
+    if (question.type === "mcq") {
+      isCorrect = question.correctAnswer === userAnswer;
+    } else if (question.type === "short-answer") {
+      if (question.correctAnswers) {
+        isCorrect = question.correctAnswers.some(
+          correct => correct.toLowerCase() === userAnswer.toLowerCase()
+        );
+      }
+    }
+
+    const newAnswer: QuizAnswer = {
+      answer: userAnswer,
+      isCorrect,
+      points: isCorrect ? question.points : 0,
+      submitted: true
+    };
+
+    const newAnswers = { ...answers, [questionId]: newAnswer };
+    setAnswers(newAnswers);
+
+    // Trigger onChange with updated state
+    const updatedState = {
+      answers: newAnswers,
+      totalScore: Object.values(newAnswers).reduce((sum, a) => sum + a.points, 0),
+      maxScore: quizState.maxScore,
+      questionsAnswered: Object.keys(newAnswers).length,
+      isCompleted: Object.keys(newAnswers).length === questions.length
+    };
+
+    onchange(updatedState);
+  };
+
+  const getProgressPercentage = () => {
+    return Math.round((quizState.questionsAnswered / questions.length) * 100);
+  };
+
+  const getScorePercentage = () => {
+    return quizState.maxScore > 0 ? Math.round((quizState.totalScore / quizState.maxScore) * 100) : 0;
+  };
+
+  const isPassing = () => {
+    return passingScore ? getScorePercentage() >= passingScore : null;
+  };
+
+  const renderMCQQuestion = (question: QuizQuestion) => {
+    const answer = answers[question.id];
+    const isAnswered = answer?.submitted;
+    const hasCorrect = typeof question.correctAnswer !== 'undefined';
+    // mcq choices 支持 key:label 格式：value(key) 是取值，label 是展示文案
+    const items = parseChoices(question.choices ?? []);
+    // 反馈文案：correctAnswer 是 key，展示时映射回 label
+    const correctLabel = hasCorrect
+      ? (items.find(i => i.value === question.correctAnswer)?.label ?? question.correctAnswer as string)
+      : '';
+
+    return (
+      <div key={question.id} className="quiz-question">
+        <div className="quiz-question-header">
+          <h3 className="quiz-question-text">{question.question}</h3>
+          <span className="quiz-question-points">{question.points} pts</span>
+        </div>
+
+        <div className="quiz-choices">
+          {items.map((item, index) => {
+            let choiceClass = 'quiz-choice';
+
+            if (isAnswered && hasCorrect) {
+              if (item.value === question.correctAnswer) {
+                choiceClass += ' quiz-choice-correct';
+              } else if (item.value === answer.answer && item.value !== question.correctAnswer) {
+                choiceClass += ' quiz-choice-incorrect';
+              }
+            } else if (item.value === answer?.answer) {
+              choiceClass += ' quiz-choice-selected';
+            }
+
+            return (
+              <button
+                key={index}
+                className={choiceClass}
+                onClick={() => handleQuestionAnswer(question.id, item.value)}
+                disabled={disabled || isAnswered}
+              >
+                {item.label}
+              </button>
+            );
+          })}
+        </div>
+
+        {isAnswered && (
+          hasCorrect ? (
+            <div className={`quiz-feedback ${answer.isCorrect ? 'correct' : 'incorrect'}`}>
+              {answer.isCorrect
+                ? `✓ Correct! (+${answer.points} pts)`
+                : `✗ Incorrect. The correct answer is: ${correctLabel}`}
+            </div>
+          ) : (
+            <div className="quiz-feedback">
+              {`You selected: ${answer.answer}`}
+            </div>
+          )
+        )}
+      </div>
+    );
+  };
+
+  const renderShortAnswerQuestion = (question: QuizQuestion) => {
+    const answer = answers[question.id];
+    const isAnswered = answer?.submitted;
+    const hasAnswers = (question.correctAnswers && question.correctAnswers.length > 0) || false;
+    const inputValue = draftInputs[question.id] ?? '';
+
+    const handleSubmit = () => {
+      if (disabled) return;
+      if (!inputValue.trim() || isAnswered) return;
+      handleQuestionAnswer(question.id, inputValue.trim());
+      // Clear draft after submission
+      setDraftInputs(prev => {
+        const next = { ...prev };
+        delete next[question.id];
+        return next;
+      });
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !isAnswered && !disabled) {
+        handleSubmit();
+      }
+    };
+
+    return (
+      <div key={question.id} className="quiz-question">
+        <div className="quiz-question-header">
+          <h3 className="quiz-question-text">{question.question}</h3>
+          <span className="quiz-question-points">{question.points} pts</span>
+        </div>
+        
+        <div className="quiz-input-container">
+          <input
+            type="text"
+            value={isAnswered ? answer.answer : inputValue}
+            onChange={(e) => {
+              if (!isAnswered && !disabled) {
+                const val = e.target.value;
+                setDraftInputs(prev => ({ ...prev, [question.id]: val }));
+              }
+            }}
+            onKeyDown={handleKeyDown}
+            placeholder={question.placeholder || "Type your answer here..."}
+            disabled={disabled || isAnswered}
+            className={`quiz-input ${
+              isAnswered
+                ? hasAnswers
+                  ? (answer.isCorrect ? 'quiz-input-correct' : 'quiz-input-incorrect')
+                  : ''
+                : ''
+            }`}
+          />
+          {!isAnswered && (
+            <button
+              onClick={handleSubmit}
+              disabled={disabled || !inputValue.trim()}
+              className="quiz-submit"
+            >
+              Submit
+            </button>
+          )}
+        </div>
+
+        {isAnswered && (
+          hasAnswers ? (
+            <div className={`quiz-feedback ${answer.isCorrect ? 'correct' : 'incorrect'}`}>
+              {answer.isCorrect 
+                ? `✓ Correct! (+${answer.points} pts)` 
+                : `✗ Incorrect. Accepted answers: ${question.correctAnswers?.join(', ') || 'N/A'}`}
+            </div>
+          ) : (
+            <div className="quiz-feedback">
+              {`Your answer: ${answer.answer}`}
+            </div>
+          )
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="widget-quiz">
+      {/* Quiz Header */}
+      <div className="quiz-header">
+        <h2 className="quiz-title">{title}</h2>
+        
+        <div className="quiz-stats">
+          {showProgress && (
+            <div className="quiz-progress">
+              <span className="quiz-progress-text">
+                Progress: {quizState.questionsAnswered}/{questions.length} questions
+              </span>
+              <div className="quiz-progress-bar">
+                <div 
+                  className="quiz-progress-fill"
+                  style={{ width: `${getProgressPercentage()}%` }}
+                />
+              </div>
+            </div>
+          )}
+          
+          {showScore && (
+            <div className="quiz-score">
+              <span className="quiz-score-text">
+                Score: {quizState.totalScore}/{quizState.maxScore} ({getScorePercentage()}%)
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Questions */}
+      <div className="quiz-questions">
+        {questions.map((question) => 
+          question.type === "mcq" 
+            ? renderMCQQuestion(question)
+            : renderShortAnswerQuestion(question)
+        )}
+      </div>
+
+      {/* Quiz Summary */}
+      {quizState.isCompleted && (
+        <div className="quiz-summary">
+          <h3>Quiz Complete!</h3>
+          <div className="quiz-final-score">
+            Final Score: {quizState.totalScore}/{quizState.maxScore} points ({getScorePercentage()}%)
+          </div>
+          {passingScore && (
+            <div className={`quiz-result ${isPassing() ? 'passed' : 'failed'}`}>
+              {isPassing() ? '🎉 Passed!' : '❌ Failed'} 
+              (Passing: {passingScore}%)
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};