From ed53615b73e9642c48129ae8a2a3a988da8418e1 Mon Sep 17 00:00:00 2001
From: Mattias Bodlund <mattias@oncotype.dk>
Date: Wed, 28 May 2025 13:38:17 +0200
Subject: [PATCH] na

---
 app/assets/stylesheets/application.css | 29 +++++++++++++++++++++++---
 app/javascript/application.js          |  4 +++-
 app/views/questions/show.html.erb      |  2 +-
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 1977843..6102bb2 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -351,6 +351,27 @@ main {
     border-radius: 1.6rem;
     background-color: var(--clr-white);    
     cursor: pointer;
+
+    & div {
+      position: relative;
+      display: inline-block; 
+      padding: 0 0.2em;
+      margin: 0 -0.2em;    
+    }
+
+    & div::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: var(--clr-text-highlight);
+      clip-path: inset(0 100% 0 0);
+      transition: clip-path 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+      z-index: 1;
+      mix-blend-mode: darken;
+    }
   }  
 
   & input[type=radio] {
@@ -362,9 +383,11 @@ main {
   }
 
   &:has(input[type=radio]:checked) {
-    & label {
-      background-color: var(--clr-text-highlight);      
-    }    
+    
+    & label>div::after {
+      clip-path: inset(0 0 0 0);
+    }
+
   }
 
   & + .question-answer {
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 0a37523..0b0ba79 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -335,6 +335,7 @@ function typeWriterConsoleSequential(container, options = {}) {
     const currentDiv = textDivs[currentDivIndex]
     const originalText = currentDiv.dataset.originalText
     const isLastDiv = currentDivIndex === textDivs.length - 1
+    const isFirstDiv = currentDivIndex === 0
 
     // Make div visible and prepare for typing
     currentDiv.style.visibility = 'visible'
@@ -342,7 +343,8 @@ function typeWriterConsoleSequential(container, options = {}) {
     currentDiv.classList.add('typing-active')
 
     let charIndex = 0
-    let nextCharTime = performance.now() + 100 // Initial delay
+    // Add 1 second delay for first div to let cursor blink twice
+    let nextCharTime = performance.now() + (isFirstDiv ? 1100 : 100)
 
     function typeFrame(currentTime) {
       if (!isActive) {
diff --git a/app/views/questions/show.html.erb b/app/views/questions/show.html.erb
index bd659a8..8ad4d3f 100644
--- a/app/views/questions/show.html.erb
+++ b/app/views/questions/show.html.erb
@@ -35,7 +35,7 @@
       <% question.attachments.with_text.each_slice(2).each_with_index do |answer_option, i| %>    
       <div class="question-answer">
         <%= form.label :value, for: nil do %>
-          <%= answer_option.first.body.html_safe %>
+          <%= tag.div tag.span(sanitize(answer_option.first.body.html_safe, tags: %w"em strong")) %>
           <%= form.radio_button :value, i %>        
         <%- end -%>
       </div>