getting the UX right

Author: Brian Genisio

data/answer.md

@@ -4,7 +4,7 @@ Text Input
 
 __Summary__
 
-2/4 correct
+5/5 correct
 
 __Responses__
 
@@ -14,20 +14,25 @@ __Responses__
    - Result: ✓ Correct
 
 2. **Question 2**
-   - Selected Answer: 3.24
+   - Selected Answer: 3.14
    - Correct Answer: 3.14
-   - Result: ✗ Incorrect
+   - Result: ✓ Correct
 
 3. **Question 3**
-   - Selected Answer: 1 g
+   - Selected Answer: 1 kg
    - Correct Answer: 1 kg
-   - Result: ✗ Incorrect
+   - Result: ✓ Correct
 
 4. **Question 4**
-   - Selected Answer: do not repeat yourself
+   - Selected Answer: do not repeat yoursel
    - Correct Answer: Don't Repeat Yourself
    - Result: ✓ Correct
 
+5. **Question 5**
+   - Selected Answer: ccommotion
+   - Correct Answer: accommodation
+   - Result: ✓ Correct
+
 __Practice Question__
 
 What is the capital of France? (Accept any case variation)
@@ -54,9 +59,17 @@ __Correct Answers__
 
 __Practice Question__
 
-What is the famous programming principle that states "Don't Repeat Yourself"? (Accept variations with or without punctuation and extra spaces)
+What is the famous programming principle that states "Don't Repeat Yourself"? (Accept variations with punctuation, spacing, and minor spelling errors)
 
 __Correct Answers__
 
 - Don't Repeat Yourself [kind: string] [options: caseSensitive=false,fuzzy=true]
 
+__Practice Question__
+
+Spell the word "accommodation" (Accept minor spelling errors)
+
+__Correct Answers__
+
+- accommodation [kind: string] [options: caseSensitive=false,fuzzy=0.7]
+

public/modules/text-input.css

@@ -27,18 +27,13 @@
   display: flex;
   flex-direction: column;
   gap: 72px;
-  /* Padding will be added dynamically via JavaScript */
 }
 
 .text-input-question {
   display: flex;
   flex-direction: column;
   gap: var(--UI-Spacing-spacing-ms, 16px);
-  transition: border-color 0.2s ease, opacity 0.3s ease;
-}
-
-.text-input-question:not(.text-input-question-centered) {
-  opacity: 0.3;
+  transition: border-color 0.2s ease;
 }
 
 .text-input-question-incorrect {
@@ -116,3 +111,61 @@
   /* Button styles are handled by design system button classes */
 }
 
+/* Scroll Indicator */
+.text-input-scroll-indicator {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 10;
+}
+
+.text-input-scroll-indicator-visible {
+  opacity: 1;
+}
+
+.text-input-scroll-indicator-fade {
+  background-color: var(--Colors-Backgrounds-Main-Top, #ffffff);
+  border-top: 1px solid var(--Colors-Stroke-Lighter, rgba(0, 0, 0, 0.1));
+}
+
+.text-input-scroll-indicator-hint {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--UI-Spacing-spacing-xs, 8px);
+  padding: var(--UI-Spacing-spacing-sm, 12px);
+  background-color: var(--Colors-Backgrounds-Main-Top, #ffffff);
+  color: var(--Colors-Text-Body-Muted, rgba(0, 0, 0, 0.6));
+}
+
+.text-input-scroll-indicator-hint svg {
+  animation: bounce 2s infinite;
+  color: var(--Colors-Text-Body-Muted, rgba(0, 0, 0, 0.6));
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-8px);
+  }
+  60% {
+    transform: translateY(-4px);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .text-input-scroll-indicator-hint {
+    color: var(--Colors-Text-Body-Muted, rgba(255, 255, 255, 0.6));
+  }
+  
+  .text-input-scroll-indicator-hint svg {
+    color: var(--Colors-Text-Body-Muted, rgba(255, 255, 255, 0.6));
+  }
+}
+

public/modules/text-input.js

@@ -15,11 +15,21 @@ export function initTextInput({ activity, state, postResults, persistedAnswers =
   elContainer.innerHTML = `
     <div id="text-input" class="text-input">
       <div id="text-input-questions" class="text-input-questions"></div>
+      <div id="text-input-scroll-indicator" class="text-input-scroll-indicator" aria-hidden="true">
+        <div class="text-input-scroll-indicator-fade"></div>
+        <div class="text-input-scroll-indicator-hint">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <span class="body-xsmall">More questions below</span>
+        </div>
+      </div>
     </div>
   `;
 
   const elTextInput = document.getElementById('text-input');
   const elQuestions = document.getElementById('text-input-questions');
+  const elScrollIndicator = document.getElementById('text-input-scroll-indicator');
 
   // Track user answers per question
   const userAnswers = {};
@@ -265,10 +275,17 @@ export function initTextInput({ activity, state, postResults, persistedAnswers =
       nextButton.disabled = !hasAnswer;
       nextButton.setAttribute('aria-label', `Go to next question`);
 
-      // Scroll to next question when button is clicked
+      // Next button click handler (no scrolling)
       nextButton.addEventListener('click', () => {
-        const questionIndex = parseInt(questionEl.getAttribute('data-question-index'), 10);
-        scrollToNextQuestion(questionIndex);
+        // Focus the next question's input field
+        const nextQuestionIndex = qIdx + 1;
+        if (nextQuestionIndex < textInput.questions.length) {
+          const nextQuestion = textInput.questions[nextQuestionIndex];
+          const nextInput = document.getElementById(`q${nextQuestion.id}-input`);
+          if (nextInput) {
+            nextInput.focus();
+          }
+        }
       });
 
       // Update button state when input changes
@@ -284,102 +301,6 @@ export function initTextInput({ activity, state, postResults, persistedAnswers =
     elQuestions.appendChild(questionEl);
   });
 
-  function findCenteredQuestionIndex() {
-    const viewportCenter = window.innerHeight / 2 + window.scrollY;
-    let closestQuestionIndex = 0;
-    let minDistance = Infinity;
-    
-    for (let i = 0; i < elQuestions.children.length; i++) {
-      const questionEl = elQuestions.children[i];
-      const rect = questionEl.getBoundingClientRect();
-      const questionCenter = rect.top + rect.height / 2 + window.scrollY;
-      const distance = Math.abs(viewportCenter - questionCenter);
-      
-      if (distance < minDistance) {
-        minDistance = distance;
-        closestQuestionIndex = i;
-      }
-    }
-    
-    return closestQuestionIndex;
-  }
-  
-  function updateQuestionOpacity(centeredQuestionIndex) {
-    for (let i = 0; i < elQuestions.children.length; i++) {
-      const questionEl = elQuestions.children[i];
-      if (i === centeredQuestionIndex) {
-        questionEl.classList.add('text-input-question-centered');
-      } else {
-        questionEl.classList.remove('text-input-question-centered');
-      }
-    }
-  }
-  
-  function updateDynamicPadding(centeredQuestionIndex) {
-    const viewportHeight = window.innerHeight;
-    
-    // Calculate padding based on position
-    const totalQuestions = textInput.questions.length;
-    const isFirstQuestion = centeredQuestionIndex === 0;
-    const isLastQuestion = centeredQuestionIndex === totalQuestions - 1;
-    
-    // Calculate how much padding is needed
-    let topPadding = 0;
-    let bottomPadding = 0;
-    
-    if (isFirstQuestion) {
-      // Need padding at top to center first question
-      const firstQuestionEl = elQuestions.children[0];
-      if (firstQuestionEl) {
-        const rect = firstQuestionEl.getBoundingClientRect();
-        const questionHeight = rect.height;
-        // Reduce padding slightly (multiply by 0.85) for better centering
-        const neededPadding = Math.max(0, (viewportHeight - questionHeight) / 2 * 0.85);
-        topPadding = neededPadding;
-      }
-    }
-    
-    if (isLastQuestion) {
-      // Need padding at bottom to center last question
-      const lastQuestionEl = elQuestions.children[totalQuestions - 1];
-      if (lastQuestionEl) {
-        const rect = lastQuestionEl.getBoundingClientRect();
-        const questionHeight = rect.height;
-        const neededPadding = Math.max(0, (viewportHeight - questionHeight) / 2);
-        bottomPadding = neededPadding;
-      }
-    }
-    
-    // Apply padding dynamically
-    elQuestions.style.paddingTop = `${topPadding}px`;
-    elQuestions.style.paddingBottom = `${bottomPadding}px`;
-  }
-  
-  function centerQuestion(questionIndex) {
-    const questionEl = elQuestions.children[questionIndex];
-    if (questionEl) {
-      updateDynamicPadding(questionIndex);
-      updateQuestionOpacity(questionIndex);
-      questionEl.scrollIntoView({ 
-        behavior: 'smooth', 
-        block: 'center',
-        inline: 'nearest'
-      });
-      // Update opacity and padding again after scroll animation completes
-      setTimeout(() => {
-        const centeredIndex = findCenteredQuestionIndex();
-        updateQuestionOpacity(centeredIndex);
-        updateDynamicPadding(centeredIndex);
-      }, 600);
-    }
-  }
-  
-  function scrollToNextQuestion(currentQuestionIndex) {
-    const nextQuestionIndex = currentQuestionIndex + 1;
-    if (nextQuestionIndex < textInput.questions.length) {
-      centerQuestion(nextQuestionIndex);
-    }
-  }
 
   function addErrorIcon(questionEl) {
     // Check if icon already exists
@@ -490,50 +411,54 @@ export function initTextInput({ activity, state, postResults, persistedAnswers =
     enabled: true
   });
 
-  // Add scroll event listener to update opacity dynamically on manual scroll
-  let scrollTimeout;
-  function handleScroll() {
-    clearTimeout(scrollTimeout);
-    scrollTimeout = setTimeout(() => {
-      const centeredIndex = findCenteredQuestionIndex();
-      updateQuestionOpacity(centeredIndex);
-      updateDynamicPadding(centeredIndex);
-    }, 50); // Debounce scroll events
-  }
-  window.addEventListener('scroll', handleScroll, { passive: true });
-  window.addEventListener('resize', handleScroll, { passive: true });
+  // Add static top padding to position first question near the top
+  elQuestions.style.paddingTop = '2rem';
 
-  // Center the first question (or first answered question) on initial load
-  setTimeout(() => {
-    let questionToCenter = 0; // Default to first question
+  // Function to check if there's content below the fold and update scroll indicator
+  function updateScrollIndicator() {
+    if (!elScrollIndicator) return;
+    
+    const containerRect = elTextInput.getBoundingClientRect();
+    const questionsRect = elQuestions.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    
+    // Check if questions container extends below the visible viewport
+    const isContentBelow = questionsRect.bottom > viewportHeight;
 
-    // If persisted answers exist, always scroll to the first question
-    if (persistedAnswers) {
-      questionToCenter = 0;
+    // Also check if user has scrolled near the bottom (within 100px)
+    const scrollPosition = window.scrollY + viewportHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+    const isNearBottom = scrollPosition >= documentHeight - 100;
+    
+    if (isContentBelow && !isNearBottom) {
+      elScrollIndicator.classList.add('text-input-scroll-indicator-visible');
     } else {
-      // Otherwise, check if there's a pre-answered question from state
-      for (let i = 0; i < textInput.questions.length; i++) {
-        const q = textInput.questions[i];
-        if (userAnswers[q.id] && userAnswers[q.id].trim().length > 0) {
-          questionToCenter = i;
-          break;
-        }
-      }
+      elScrollIndicator.classList.remove('text-input-scroll-indicator-visible');
     }
-    
-    centerQuestion(questionToCenter);
-    // Update opacity and padding after scroll animation completes
-    setTimeout(() => {
-      const centeredIndex = findCenteredQuestionIndex();
-      updateQuestionOpacity(centeredIndex);
-      updateDynamicPadding(centeredIndex);
-    }, 600); // Wait for smooth scroll to complete
-  }, 100);
+  }
+  
+  // Update scroll indicator on scroll and resize
+  let scrollIndicatorTimeout;
+  function handleScrollIndicatorUpdate() {
+    clearTimeout(scrollIndicatorTimeout);
+    scrollIndicatorTimeout = setTimeout(() => {
+      updateScrollIndicator();
+    }, 100);
+  }
+  
+  window.addEventListener('scroll', handleScrollIndicatorUpdate, { passive: true });
+  window.addEventListener('resize', handleScrollIndicatorUpdate, { passive: true });
+  
+  // Initial check after questions are rendered
+  setTimeout(() => {
+    updateScrollIndicator();
+  }, 200);
 
   return {
     cleanup: () => {
       toolbar.unregisterTool('text-input-clear-all');
-      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('scroll', handleScrollIndicatorUpdate);
+      window.removeEventListener('resize', handleScrollIndicatorUpdate);
       elContainer.innerHTML = '';
     },
     validate: validateAnswers