feat: enhance multi-select question prompts and improve flashcard styles

Author: CodeKokeshi

Projects/intelligent-systems-reviewer-quiz/quiz.js

@@ -170,7 +170,12 @@ function renderQuestion() {
 
   questionTypeBadge.textContent = questionTypeLabels[question.type] || "Question";
   questionTopic.textContent = question.topic;
-  questionText.textContent = question.prompt || question.question;
+  
+  if (question.type === "multi-select" && question.requiredSelections) {
+    questionText.textContent = `${question.prompt || question.question} (Select ${question.requiredSelections} answers)`;
+  } else {
+    questionText.textContent = question.prompt || question.question;
+  }
 
   if (question.type === "multiple") {
     renderMultipleChoice(question);
@@ -207,7 +212,8 @@ function renderMultipleChoice(question) {
 
 function renderMultiSelect(question) {
   multipleChoiceOptions.style.display = "flex";
-  const required = question.minSelections || question.answers.length;
+  const required = question.answers.length;
+  question.requiredSelections = required;
   question.options.forEach(option => {
     const button = document.createElement("button");
     button.type = "button";
@@ -225,7 +231,7 @@ function renderMultiSelect(question) {
         selectedOptions.add(option.value);
         button.classList.add("selected");
       }
-      submitAnswerBtn.disabled = selectedOptions.size < required;
+      submitAnswerBtn.disabled = selectedOptions.size < 1;
     });
     multipleChoiceOptions.appendChild(button);
   });

Projects/intelligent-systems-reviewer-quiz/styles.css

@@ -171,13 +171,27 @@ main {
 }
 
 .flashcard-face {
-  position: absolute;
-  inset: 32px;
   backface-visibility: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 16px;
+  min-height: 256px;
+}
+
+.flashcard-face.front {
+  transform: rotateY(0deg);
+}
+
+.flashcard-face.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 32px;
+  transform: rotateY(180deg);
+  overflow-y: auto;
 }
 
 .flashcard-face h2 {
@@ -402,7 +416,10 @@ footer {
   }
 
   .flashcard-face {
-    inset: 24px;
-    overflow-y: auto;
+    min-height: 200px;
+  }
+
+  .flashcard-face.back {
+    padding: 24px;
   }
 }

Projects/iot-reviewer-quiz/quiz.js

@@ -862,14 +862,16 @@ function generateMultiSelect(card) {
   );
 
   const correctAnswers = options.filter(opt => opt.isCorrect).map(opt => opt.value);
+  const requiredSelections = correctAnswers.length;
 
   return {
     type: "ms",
     card,
     question: card.question,
     options,
     correctAnswers,
-    minSelections: override.minSelections || correctAnswers.length,
+    requiredSelections,
+    minSelections: 1,
     explanation: buildExplanationMarkup(card, "ms"),
     userAnswer: new Set(),
     isCorrect: false
@@ -1066,7 +1068,12 @@ function renderQuestion() {
 
   questionTypeBadge.textContent = typeLabels[q.type] || "Quiz";
   questionTopic.textContent = q.card.topic;
-  questionText.textContent = q.question;
+  
+  if (q.type === "ms" && q.requiredSelections) {
+    questionText.textContent = `${q.question} (Select ${q.requiredSelections} answers)`;
+  } else {
+    questionText.textContent = q.question;
+  }
 
   feedback.style.display = "none";
   submitAnswerBtn.disabled = true;

Projects/iot-reviewer-quiz/styles.css

@@ -169,13 +169,38 @@ main {
 }
 
 .flashcard-face {
-  position: absolute;
-  inset: 32px;
   backface-visibility: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 16px;
+  min-height: 256px;
+}
+
+.flashcard-face.front {
+  transform: rotateY(0deg);
+}
+
+.flashcard-face.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 32px;
+  transform: rotateY(180deg);
+  overflow-y: auto;
+}
+
+.flashcard-face.back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 32px;
+  transform: rotateY(180deg);
+  overflow-y: auto;
 }
 
 .flashcard-face h2 {
@@ -211,10 +236,6 @@ main {
   border-radius: 3px;
 }
 
-.flashcard-face.back {
-  transform: rotateY(180deg);
-}
-
 .flashcard-help {
   font-size: 0.85rem;
   color: var(--muted);
@@ -367,7 +388,10 @@ footer {
   }
 
   .flashcard-face {
-    inset: 24px;
-    overflow-y: auto;
+    min-height: 200px;
+  }
+
+  .flashcard-face.back {
+    padding: 24px;
   }
 }