+ This is a prototype SolidJS reimplementation of the BlockPy frontend. +
+ + +
+
+ {state().code}
+
+
+ ${line.type}: ${line.contents}`
+ ).join("\n");
+ message += "Execution Output:" + outputBody + ""; + } + if ("errors" in data) { + const errors = JSON.parse(data['errors']); + const errorBody = errors.map((error: any) => `
${error}`).join("\n");
+ message += "Execution Errors:" + errorBody + ""; + } + message += `Run Details
${JSON.stringify(data, null, 2)}`;
+ } catch (e) {
+ console.error(e);
+ message = `Run Details${log.message()}`;
+ }
+ }
+ this.system = `${message}`;
+ break;
+ case "Compile.Error":
+ this.system = `Compiler Error+ Demonstration of the SolidJS quiz system conversion. +
+ +Which is correct?
', + points: 1, + answers: ['Option A', 'Option B', 'Option C'] +} +``` + +### True/False + +```javascript +{ + id: 'q2', + type: 'true_false_question', + body: 'Python is interpreted.
', + points: 1 +} +``` + +### Short Answer + +```javascript +{ + id: 'q3', + type: 'short_answer_question', + body: 'What keyword defines a function?
', + points: 1 +} +``` + +### Multiple Answers + +```javascript +{ + id: 'q4', + type: 'multiple_answers_question', + body: 'Select all valid types:
', + points: 2, + answers: ['int', 'str', 'boolean', 'list'] +} +``` + +## Testing + +The quiz system includes comprehensive tests: + +```bash +npm test +``` + +**Test Coverage:** +- Quiz model state management (34 tests) +- Question rendering +- Attempt limits +- Feedback display +- Instructor/student modes + +## Conversion from KnockoutJS + +### Key Differences + +**Observable → Signal:** +```typescript +// KnockoutJS +this.attempting = ko.observable(false); +this.attempting(true); // Set +this.attempting(); // Get + +// SolidJS +const [attempting, setAttempting] = createSignal(false); +setAttempting(true); // Set +attempting(); // Get +``` + +**Computed → Memo:** +```typescript +// KnockoutJS +this.attemptStatus = ko.pureComputed(() => { + return this.attempting() ? "ATTEMPTING" : "READY"; +}); + +// SolidJS +const attemptStatus = createMemo(() => { + return attempting() ? "ATTEMPTING" : "READY"; +}); +``` + +**Templates:** +```html + + + + + + +Python is a compiled language.
', + points: 1 + }, + 'sa1': { + id: 'sa1', + type: QuizQuestionType.short_answer_question, + body: 'What keyword is used to define a function in Python?
', + points: 1 + }, + 'ma1': { + id: 'ma1', + type: QuizQuestionType.multiple_answers_question, + body: 'Which of the following are valid Python data types? (Select all that apply)
', + points: 2, + answers: ['int', 'str', 'boolean', 'char', 'list', 'array'] + }, + 'tf2': { + id: 'tf2', + type: QuizQuestionType.true_false_question, + body: 'Variables in Python must be declared with their type.
', + points: 1 + } + } + }, + submission: { + studentAnswers: {}, + attempt: { + attempting: false, + count: 0, + mulligans: 0 + }, + feedback: {} + } +}; + +export const attemptingMixedQuiz: QuizData = { + ...mixedQuestionTypesQuiz, + submission: { + studentAnswers: { + 'tf1': false, + 'sa1': 'def' + }, + attempt: { + attempting: true, + count: 0, + mulligans: 0 + }, + feedback: {} + } +}; + +export const completedMixedQuiz: QuizData = { + ...mixedQuestionTypesQuiz, + submission: { + studentAnswers: { + 'tf1': false, + 'sa1': 'def', + 'ma1': ['int', 'str', 'list'], + 'tf2': false + }, + attempt: { + attempting: false, + count: 1, + mulligans: 0 + }, + feedback: { + 'tf1': { + correct: true, + message: 'Correct! Python is an interpreted language.', + score: 1 + }, + 'sa1': { + correct: true, + message: 'Correct! Thedef keyword is used to define functions.',
+ score: 1
+ },
+ 'ma1': {
+ correct: true,
+ message: 'Correct! int, str, and list are all valid Python data types.',
+ score: 2
+ },
+ 'tf2': {
+ correct: true,
+ message: 'Correct! Python uses dynamic typing.',
+ score: 1
+ }
+ }
+ }
+};
diff --git a/frontend-solid/tests/fixtures/quiz-multiple-choice.ts b/frontend-solid/tests/fixtures/quiz-multiple-choice.ts
new file mode 100644
index 00000000..5881f74c
--- /dev/null
+++ b/frontend-solid/tests/fixtures/quiz-multiple-choice.ts
@@ -0,0 +1,88 @@
+/**
+ * Test fixture: Simple multiple choice quiz
+ * Scenario: Basic quiz with 3 multiple choice questions
+ */
+
+import { QuizData, QuizQuestionType, QuizFeedbackType, QuizPoolRandomness } from '../../src/components/quizzes/types';
+
+export const simpleMultipleChoiceQuiz: QuizData = {
+ assignmentId: 201,
+ courseId: 1,
+ userId: 1,
+ instructions: {
+ settings: {
+ attemptLimit: 2,
+ coolDown: -1,
+ feedbackType: QuizFeedbackType.IMMEDIATE,
+ questionsPerPage: -1,
+ poolRandomness: QuizPoolRandomness.SEED,
+ readingId: null
+ },
+ pools: [],
+ questions: {
+ 'q1': {
+ id: 'q1',
+ type: QuizQuestionType.multiple_choice_question,
+ body: 'What is 2 + 2?
', + points: 1, + answers: ['3', '4', '5', '6'] + }, + 'q2': { + id: 'q2', + type: QuizQuestionType.multiple_choice_question, + body: 'Which programming language is this course about?
', + points: 1, + answers: ['Java', 'Python', 'C++', 'JavaScript'] + }, + 'q3': { + id: 'q3', + type: QuizQuestionType.multiple_choice_question, + body: 'What does print("Hello") output?
A for loop in Python uses the [keyword] keyword to iterate over [structure].
To define a function in Python, use the [keyword1] keyword followed by the function [keyword2] and parentheses.
', + points: 2 + } + } + }, + submission: { + studentAnswers: {}, + attempt: { + attempting: false, + count: 0, + mulligans: 0 + }, + feedback: {} + } + }; + // Initialize quizzes document.addEventListener('DOMContentLoaded', () => { initQuizzer('#quiz-1', simpleQuiz, false); initQuizzer('#quiz-2', mixedQuiz, false); + initQuizzer('#quiz-advanced', advancedQuiz, false); initQuizzer('#quiz-instructor', simpleQuiz, true); }); diff --git a/frontend-solid/src/components/quizzes/QuestionComponent.tsx b/frontend-solid/src/components/quizzes/QuestionComponent.tsx index dcb00c9b..71dd2fe3 100644 --- a/frontend-solid/src/components/quizzes/QuestionComponent.tsx +++ b/frontend-solid/src/components/quizzes/QuestionComponent.tsx @@ -2,16 +2,74 @@ * Question components for different quiz question types */ -import { Component, Show, For } from 'solid-js'; +import { Component, Show, For, createMemo } from 'solid-js'; import { Question, MultipleChoiceQuestion, TrueFalseQuestion, ShortAnswerQuestion, MultipleAnswersQuestion, + MultipleDropdownsQuestion, + FillInMultipleBlanksQuestion, QuizQuestionType } from './types'; +// Regular expression to match square brackets (not escaped) +const SQUARE_BRACKETS = /(? ["color", "shade"] + */ +function getBracketed(body: string): string[] { + const matches = body.match(SQUARE_BRACKETS); + if (!matches) return []; + + return matches + .filter((part: string) => !(part.startsWith('[[') && part.endsWith(']]'))) + .map((part: string) => part.slice(1, -1)); +} + +/** + * Parse body text and replace [identifier] with components + * Returns array of text segments and identifiers + */ +function parseBodyWithBlanks(body: string): Array<{ type: 'text' | 'blank', content: string }> { + const parts: Array<{ type: 'text' | 'blank', content: string }> = []; + let lastIndex = 0; + + const regex = /(? lastIndex) { + parts.push({ + type: 'text', + content: body.substring(lastIndex, match.index) + }); + } + + // Add the blank/dropdown identifier + parts.push({ + type: 'blank', + content: match[1] + }); + + lastIndex = regex.lastIndex; + } + + // Add remaining text + if (lastIndex < body.length) { + parts.push({ + type: 'text', + content: body.substring(lastIndex) + }); + } + + return parts; +} + interface QuestionProps { question: Question; answer: any; @@ -22,42 +80,71 @@ interface QuestionProps { } export const QuestionComponent: ComponentA for loop uses the [keyword] keyword to iterate over [structure].
To define a function, use [keyword1] followed by the [keyword2] and parentheses.
', + points: 2 +} +``` + +Note: Square brackets `[identifier]` in the body create text input boxes. The identifiers become the keys in the answer object. + ## Testing The quiz system includes comprehensive tests: @@ -219,6 +250,7 @@ npm test **Test Coverage:** - Quiz model state management (34 tests) +- Advanced question types (18 tests - dropdowns and fill-in-blanks) - Question rendering - Attempt limits - Feedback display @@ -288,7 +320,7 @@ tests/ ## Future Enhancements -- [ ] Implement remaining question types (matching, dropdowns, etc.) +- [ ] Implement remaining question types (matching, essay, numerical) - [ ] Add question pools and randomization - [ ] Implement pagination (questions per page) - [ ] Add cooldown period between attempts @@ -297,10 +329,11 @@ tests/ - [ ] Implement quiz timer - [ ] Add accessibility improvements - [ ] Create quiz editor interface +- [ ] Improve escaped bracket handling in fill-in-blanks ## Performance -- **Build size**: 37.4 KB (12 KB gzipped) +- **Build size**: 40.25 KB (12.57 KB gzipped) - **Combined with Watcher**: Total bundle remains small - **Reactive updates**: Only affected DOM nodes update diff --git a/frontend-solid/src/components/quizzes/types.ts b/frontend-solid/src/components/quizzes/types.ts index 3b9c6048..d326b85b 100644 --- a/frontend-solid/src/components/quizzes/types.ts +++ b/frontend-solid/src/components/quizzes/types.ts @@ -84,11 +84,23 @@ export interface MultipleAnswersQuestion extends QuestionBase { answers: string[]; } +export interface MultipleDropdownsQuestion extends QuestionBase { + type: QuizQuestionType.multiple_dropdowns_question; + answers: RecordA for loop in Python uses the [keyword] keyword to iterate over [structure].
To define a function in Python, use the [keyword1] keyword followed by the function [keyword2] and parentheses.
', + points: 2 + }, + 'mdq2': { + id: 'mdq2', + type: QuizQuestionType.multiple_dropdowns_question, + body: 'The data type for whole numbers is [type1], while decimal numbers use [type2], and text uses [type3].
', + points: 3, + retainOrder: true, + answers: { + 'type1': ['int', 'float', 'str', 'bool'], + 'type2': ['float', 'int', 'str', 'decimal'], + 'type3': ['str', 'string', 'text', 'char'] + } + }, + 'fimb2': { + id: 'fimb2', + type: QuizQuestionType.fill_in_multiple_blanks_question, + body: 'To print output in Python, use [function](). To get user input, use [input_func]().
for loops to iterate over sequences.',
+ score: 2
+ },
+ 'fimb1': {
+ correct: true,
+ message: 'Correct! Functions are defined with def followed by the function name.',
+ score: 2
+ },
+ 'mdq2': {
+ correct: true,
+ message: 'Perfect! You correctly identified int, float, and str.',
+ score: 3
+ },
+ 'fimb2': {
+ correct: true,
+ message: 'Correct! print() for output and input() for input.',
+ score: 2
+ }
+ }
+ }
+};
+
+// Example with escaped square brackets
+export const escapedBracketsQuiz: QuizData = {
+ assignmentId: 204,
+ courseId: 1,
+ userId: 4,
+ instructions: {
+ settings: {
+ attemptLimit: 1,
+ coolDown: -1,
+ feedbackType: QuizFeedbackType.IMMEDIATE,
+ questionsPerPage: -1,
+ poolRandomness: QuizPoolRandomness.NONE,
+ readingId: null
+ },
+ pools: [],
+ questions: {
+ 'fimb3': {
+ id: 'fimb3',
+ type: QuizQuestionType.fill_in_multiple_blanks_question,
+ body: 'To access a list element, use [[square brackets]] like my_list[0]. The [keyword] statement adds items to a list.
Interactive quiz creation with undo/redo functionality
+What is Python?
', + points: 2, + answers: ['A language', 'A snake', 'A framework'] + }, + 'q2': { + id: 'q2', + type: 'true_false_question', + body: 'Python is interpreted.
', + points: 1 + } + } + } +}; + +initQuizEditor('#editor', existingQuiz, handleSave); +``` + +## Testing + +14+ passing tests covering: +- Initialization and rendering +- Adding/deleting questions +- Reordering questions +- Editing questions +- Changing question types +- Undo/redo functionality +- Save functionality +- Action history +- Empty state + +Run tests: +```bash +npm test quiz-editor +``` + +## Performance + +- **Build size**: Adds ~10 KB to bundle (49.97 KB total vs 40.25 KB without editor) +- **Memory**: Efficient undo/redo implementation with minimal memory overhead +- **Reactivity**: Only affected DOM nodes update when state changes + +## Browser Support + +Same as main SolidJS frontend: +- Chrome/Edge (latest) +- Firefox (latest) +- Safari (latest) +- Modern mobile browsers + +## Future Enhancements + +- [ ] Drag-and-drop reordering +- [ ] Bulk operations (delete multiple, move multiple) +- [ ] Copy/paste questions +- [ ] Question templates +- [ ] Rich text editor for question body +- [ ] Answer option editing (for MC/MA questions) +- [ ] Question preview mode +- [ ] Import/export questions +- [ ] Question bank integration +- [ ] Collaborative editing +- [ ] Auto-save functionality +- [ ] Version history + +## Related Components + +- **Quizzer**: Student quiz-taking interface +- **QuestionComponent**: Renders individual questions +- **Quiz Model**: Quiz state management + +## Dependencies + +- SolidJS 1.8.11+ +- Bootstrap 5.3+ (for styling) +- Bootstrap Icons (for toolbar icons) diff --git a/frontend-solid/src/components/quizzes/QuizEditor.css b/frontend-solid/src/components/quizzes/QuizEditor.css new file mode 100644 index 00000000..9a8d2a70 --- /dev/null +++ b/frontend-solid/src/components/quizzes/QuizEditor.css @@ -0,0 +1,61 @@ +/* Quiz Editor Styles */ + +.quiz-editor { + outline: none; +} + +.editor-toolbar { + position: sticky; + top: 0; + z-index: 100; + background: white !important; +} + +.question-card { + transition: all 0.2s ease; + cursor: pointer; +} + +.question-card:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.question-card.border-primary { + box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3); +} + +.question-body { + border: 2px dashed transparent; + padding: 8px; + border-radius: 4px; + transition: all 0.2s ease; +} + +.question-body:hover { + border-color: #0d6efd; + background-color: #f8f9fa; +} + +.question-options { + animation: slideDown 0.2s ease; +} + +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.btn-group .btn { + margin: 0; +} + +/* Ensure Bootstrap icons work */ +.bi::before { + vertical-align: middle; +} diff --git a/frontend-solid/src/components/quizzes/QuizEditor.tsx b/frontend-solid/src/components/quizzes/QuizEditor.tsx new file mode 100644 index 00000000..74118296 --- /dev/null +++ b/frontend-solid/src/components/quizzes/QuizEditor.tsx @@ -0,0 +1,581 @@ +/** + * Quiz Editor - Interactive quiz creation and editing with undo/redo + */ + +import { Component, createSignal, For, Show, createMemo } from 'solid-js'; +import { Question, QuizQuestionType, QuizData } from './types'; + +// Editor actions for undo/redo +interface EditorAction { + type: 'add' | 'delete' | 'reorder' | 'edit' | 'changeType'; + questionId?: string; + previousState?: any; + newState?: any; + fromIndex?: number; + toIndex?: number; +} + +interface QuizEditorProps { + quizData: QuizData; + onSave?: (data: QuizData) => void; +} + +export const QuizEditor: ComponentNew question
', + points: 1, + ...(type === QuizQuestionType.multiple_choice_question && { + answers: ['Option 1', 'Option 2', 'Option 3'] + }), + ...(type === QuizQuestionType.true_false_question && {}), + ...(type === QuizQuestionType.short_answer_question && {}), + ...(type === QuizQuestionType.multiple_answers_question && { + answers: ['Option 1', 'Option 2', 'Option 3'] + }), + ...(type === QuizQuestionType.multiple_dropdowns_question && { + answers: { blank1: ['Option 1', 'Option 2'] }, + retainOrder: false + }), + ...(type === QuizQuestionType.fill_in_multiple_blanks_question && {}) + } as Question; + + setQuestions({ ...questions(), [newId]: newQuestion }); + setQuestionOrder([...questionOrder(), newId]); + + recordAction({ + type: 'add', + questionId: newId, + newState: newQuestion + }); + }; + + // Delete question + const deleteQuestion = (id: string) => { + const questionsCopy = { ...questions() }; + const deletedQuestion = questionsCopy[id]; + delete questionsCopy[id]; + + setQuestions(questionsCopy); + setQuestionOrder(questionOrder().filter(qId => qId !== id)); + + if (selectedQuestion() === id) { + setSelectedQuestion(null); + } + + recordAction({ + type: 'delete', + questionId: id, + previousState: deletedQuestion + }); + }; + + // Move question up or down + const moveQuestion = (id: string, direction: 'up' | 'down') => { + const order = [...questionOrder()]; + const index = order.indexOf(id); + + if (index === -1) return; + if (direction === 'up' && index === 0) return; + if (direction === 'down' && index === order.length - 1) return; + + const newIndex = direction === 'up' ? index - 1 : index + 1; + [order[index], order[newIndex]] = [order[newIndex], order[index]]; + + setQuestionOrder(order); + + recordAction({ + type: 'reorder', + questionId: id, + fromIndex: index, + toIndex: newIndex + }); + }; + + // Edit question body + const updateQuestionBody = (id: string, newBody: string) => { + const questionsCopy = { ...questions() }; + const oldBody = questionsCopy[id].body; + questionsCopy[id] = { ...questionsCopy[id], body: newBody }; + + setQuestions(questionsCopy); + setEditingBody(null); + + recordAction({ + type: 'edit', + questionId: id, + previousState: { body: oldBody }, + newState: { body: newBody } + }); + }; + + // Change question type + const changeQuestionType = (id: string, newType: QuizQuestionType) => { + const questionsCopy = { ...questions() }; + const oldQuestion = questionsCopy[id]; + + const baseQuestion = { + id, + type: newType, + body: oldQuestion.body, + points: oldQuestion.points + }; + + // Add type-specific properties + let newQuestion: Question; + switch (newType) { + case QuizQuestionType.multiple_choice_question: + newQuestion = { ...baseQuestion, answers: ['Option 1', 'Option 2', 'Option 3'] } as any; + break; + case QuizQuestionType.multiple_answers_question: + newQuestion = { ...baseQuestion, answers: ['Option 1', 'Option 2', 'Option 3'] } as any; + break; + case QuizQuestionType.multiple_dropdowns_question: + newQuestion = { ...baseQuestion, answers: { blank1: ['Option 1', 'Option 2'] }, retainOrder: false } as any; + break; + case QuizQuestionType.true_false_question: + case QuizQuestionType.short_answer_question: + case QuizQuestionType.fill_in_multiple_blanks_question: + default: + newQuestion = baseQuestion as any; + } + + questionsCopy[id] = newQuestion; + setQuestions(questionsCopy); + + recordAction({ + type: 'changeType', + questionId: id, + previousState: oldQuestion, + newState: newQuestion + }); + }; + + // Undo last action + const undo = () => { + const actions = undoStack(); + if (actions.length === 0) return; + + const action = actions[actions.length - 1]; + setUndoStack(actions.slice(0, -1)); + setRedoStack([...redoStack(), action]); + + switch (action.type) { + case 'add': + // Remove the added question + const questionsAfterUndoAdd = { ...questions() }; + delete questionsAfterUndoAdd[action.questionId!]; + setQuestions(questionsAfterUndoAdd); + setQuestionOrder(questionOrder().filter(id => id !== action.questionId)); + break; + + case 'delete': + // Restore the deleted question + setQuestions({ ...questions(), [action.questionId!]: action.previousState }); + setQuestionOrder([...questionOrder(), action.questionId!]); + break; + + case 'reorder': + // Reverse the reorder + const orderAfterUndo = [...questionOrder()]; + [orderAfterUndo[action.fromIndex!], orderAfterUndo[action.toIndex!]] = + [orderAfterUndo[action.toIndex!], orderAfterUndo[action.fromIndex!]]; + setQuestionOrder(orderAfterUndo); + break; + + case 'edit': + // Restore previous body + const questionsAfterUndoEdit = { ...questions() }; + questionsAfterUndoEdit[action.questionId!] = { + ...questionsAfterUndoEdit[action.questionId!], + ...action.previousState + }; + setQuestions(questionsAfterUndoEdit); + break; + + case 'changeType': + // Restore previous question type + const questionsAfterUndoType = { ...questions() }; + questionsAfterUndoType[action.questionId!] = action.previousState; + setQuestions(questionsAfterUndoType); + break; + } + }; + + // Redo last undone action + const redo = () => { + const actions = redoStack(); + if (actions.length === 0) return; + + const action = actions[actions.length - 1]; + setRedoStack(actions.slice(0, -1)); + setUndoStack([...undoStack(), action]); + + switch (action.type) { + case 'add': + // Re-add the question + setQuestions({ ...questions(), [action.questionId!]: action.newState }); + setQuestionOrder([...questionOrder(), action.questionId!]); + break; + + case 'delete': + // Re-delete the question + const questionsAfterRedoDelete = { ...questions() }; + delete questionsAfterRedoDelete[action.questionId!]; + setQuestions(questionsAfterRedoDelete); + setQuestionOrder(questionOrder().filter(id => id !== action.questionId)); + break; + + case 'reorder': + // Re-apply the reorder + const orderAfterRedo = [...questionOrder()]; + [orderAfterRedo[action.fromIndex!], orderAfterRedo[action.toIndex!]] = + [orderAfterRedo[action.toIndex!], orderAfterRedo[action.fromIndex!]]; + setQuestionOrder(orderAfterRedo); + break; + + case 'edit': + // Re-apply the edit + const questionsAfterRedoEdit = { ...questions() }; + questionsAfterRedoEdit[action.questionId!] = { + ...questionsAfterRedoEdit[action.questionId!], + ...action.newState + }; + setQuestions(questionsAfterRedoEdit); + break; + + case 'changeType': + // Re-apply the type change + const questionsAfterRedoType = { ...questions() }; + questionsAfterRedoType[action.questionId!] = action.newState; + setQuestions(questionsAfterRedoType); + break; + } + }; + + // Save quiz + const saveQuiz = () => { + const updatedQuizData: QuizData = { + ...props.quizData, + instructions: { + ...props.quizData.instructions, + questions: questions() + } + }; + + props.onSave?.(updatedQuizData); + }; + + // Keyboard shortcuts + const handleKeyDown = (e: KeyboardEvent) => { + if ((e.ctrlKey || e.metaKey) && e.key === 'z') { + e.preventDefault(); + if (e.shiftKey) { + redo(); + } else { + undo(); + } + } + }; + + // Question type display names + const questionTypeNames: Record