Use the split panel component from the design system

Author: Brian Genisio

data/answer.md

@@ -4,72 +4,33 @@ Text Input
 
 __Summary__
 
-5/5 correct
+0/2 correct
 
 __Responses__
 
 1. **Question 1**
-   - Selected Answer: paris
+   - Selected Answer: No answer selected
    - Correct Answer: Paris
-   - Result: ✓ Correct
+   - Result: ✗ Incorrect
 
 2. **Question 2**
-   - Selected Answer: 3.14
-   - Correct Answer: 3.14
-   - Result: ✓ Correct
-
-3. **Question 3**
-   - Selected Answer: 1 kg
-   - Correct Answer: 1 kg
-   - Result: ✓ Correct
-
-4. **Question 4**
-   - 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)
-
-__Correct Answers__
-
-- Paris [kind: string] [options: caseSensitive=false,fuzzy=false]
-
-__Practice Question__
-
-What is the approximate value of π? (Accept values within 0.1)
-
-__Correct Answers__
-
-- 3.14 [kind: numeric] [options: threshold=0.1,precision=2]
-
-__Practice Question__
-
-How many kilograms are in 1000 grams? (Include unit)
-
-__Correct Answers__
-
-- 1 kg [kind: numeric-with-units] [options: threshold=0.01,precision=2,units=kg]
+   - Selected Answer: No answer selected
+   - Correct Answer: 4
+   - Result: ✗ Incorrect
 
 __Practice Question__
 
-What is the famous programming principle that states "Don't Repeat Yourself"? (Accept variations with punctuation, spacing, and minor spelling errors)
+What is the capital of France?
 
 __Correct Answers__
 
-- Don't Repeat Yourself [kind: string] [options: caseSensitive=false,fuzzy=true]
+- Paris [kind: string] [options: caseSensitive=false]
 
 __Practice Question__
 
-Spell the word "accommodation" (Accept minor spelling errors)
+What is 2 + 2?
 
 __Correct Answers__
 
-- accommodation [kind: string] [options: caseSensitive=false,fuzzy=0.7]
+- 4 [kind: numeric] [options: threshold=0.01,precision=2]
 

data/examples/text-input-with-markdown-content.md

@@ -0,0 +1,40 @@
+__Type__
+
+Text Input
+
+__Content__
+
+# Additional Information
+
+This section provides context and details to help you answer the questions below.
+
+## Key Concepts
+
+- **Capital City**: The city that serves as the seat of government
+- **Mathematical Operations**: Basic arithmetic including addition, subtraction, multiplication, and division
+
+## Tips
+
+1. Read each question carefully
+2. Consider the context provided
+3. Check your spelling before submitting
+
+---
+
+> Note: All answers are case-insensitive unless otherwise specified.
+
+__Practice Question__
+
+What is the capital of France?
+
+__Correct Answers__
+
+- Paris [kind: string] [options: caseSensitive=false]
+
+__Practice Question__
+
+What is 2 + 2?
+
+__Correct Answers__
+
+- 4 [kind: numeric] [options: threshold=0.01,precision=2]

data/examples/text-input-with-url-content.md

@@ -0,0 +1,23 @@
+__Type__
+
+Text Input
+
+__Content__
+
+https://example.com/documentation
+
+__Practice Question__
+
+What is the capital of France?
+
+__Correct Answers__
+
+- Paris [kind: string] [options: caseSensitive=false]
+
+__Practice Question__
+
+What is 2 + 2?
+
+__Correct Answers__
+
+- 4 [kind: numeric] [options: threshold=0.01,precision=2]

data/question.md

@@ -2,43 +2,39 @@ __Type__
 
 Text Input
 
-__Practice Question__
-
-What is the capital of France? (Accept any case variation)
-
-__Correct Answers__
-
-- Paris [kind: string] [options: caseSensitive=false,fuzzy=false]
+__Content__
 
-__Practice Question__
+# Additional Information
 
-What is the approximate value of π? (Accept values within 0.1)
+This section provides context and details to help you answer the questions below.
 
-__Correct Answers__
+## Key Concepts
 
-- 3.14 [kind: numeric] [options: threshold=0.1,precision=2]
+- **Capital City**: The city that serves as the seat of government
+- **Mathematical Operations**: Basic arithmetic including addition, subtraction, multiplication, and division
 
-__Practice Question__
+## Tips
 
-How many kilograms are in 1000 grams? (Include unit)
+1. Read each question carefully
+2. Consider the context provided
+3. Check your spelling before submitting
 
-__Correct Answers__
+---
 
-- 1 kg [kind: numeric-with-units] [options: threshold=0.01,precision=2,units=kg,g]
+> Note: All answers are case-insensitive unless otherwise specified.
 
 __Practice Question__
 
-What is the famous programming principle that states "Don't Repeat Yourself"? (Accept variations with punctuation, spacing, and minor spelling errors)
+What is the capital of France?
 
 __Correct Answers__
 
-- Don't Repeat Yourself [kind: string] [options: caseSensitive=false,fuzzy=true]
+- Paris [kind: string] [options: caseSensitive=false]
 
 __Practice Question__
 
-Spell the word "accommodation" (Accept minor spelling errors)
+What is 2 + 2?
 
 __Correct Answers__
 
-- accommodation [kind: string] [options: caseSensitive=false,fuzzy=0.7]
-
+- 4 [kind: numeric] [options: threshold=0.01,precision=2]

public/design-system

@@ -18,6 +18,7 @@
   <link rel="stylesheet" href="/modules/matching.css" />
   <link rel="stylesheet" href="/modules/text-input.css" />
   <link rel="stylesheet" href="/design-system/components/horizontal-cards/horizontal-cards.css" />
+  <link rel="stylesheet" href="/design-system/components/split-panel/split-panel.css" />
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='0.9em' font-size='90'%3E%E2%98%85%3C/text%3E%3C/svg%3E" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

public/index.html

@@ -23,6 +23,21 @@
   margin: 0 auto;
 }
 
+.text-input-with-content {
+  max-width: 100%;
+  padding: 0;
+  gap: 0;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+  width: 100%;
+}
+
+.text-input-split-panel {
+  width: 100%;
+  height: 100%;
+}
+
 .text-input-questions {
   display: flex;
   flex-direction: column;
@@ -107,8 +122,49 @@
   margin-top: var(--UI-Spacing-spacing-ms, 16px);
 }
 
-.text-input-next-button {
-  /* Button styles are handled by design system button classes */
+/* Content and Splitter Styles */
+.text-input-content-wrapper {
+  height: 100%;
+  overflow: auto;
+  background-color: var(--Colors-Backgrounds-Main-Top, #ffffff);
+  position: relative;
+}
+
+.text-input-content-iframe {
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--Colors-Stroke-Lighter, rgba(0, 0, 0, 0.1));
+  display: block;
+}
+
+/* Disable pointer events on iframe during drag to prevent event loss */
+.split-panel-container.dragging .text-input-content-iframe {
+  pointer-events: none !important;
+}
+
+.text-input-questions-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 1.5rem;
+  position: relative;
+}
+
+@media (prefers-color-scheme: dark) {
+  .text-input-content-wrapper {
+    background-color: var(--Colors-Backgrounds-Main-Top);
+    border-right-color: var(--Colors-Stroke-Lighter);
+  }
+  
+  .text-input-splitter {
+    background-color: var(--Colors-Stroke-Lighter);
+  }
+  
+  .text-input-splitter:hover,
+  .text-input-splitter:focus {
+    background-color: var(--Colors-Stroke-Default);
+  }
 }
 
 /* Scroll Indicator */
@@ -123,6 +179,12 @@
   z-index: 10;
 }
 
+.text-input-with-content .text-input-scroll-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
 .text-input-scroll-indicator-visible {
   opacity: 1;
 }