From 5094360dab2d3d66f03a92a574403ba7b13a47df Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Sun, 29 Mar 2020 20:36:08 -0400
Subject: [PATCH 01/31] paginated report.ejs

---
 app/views/pages/report.ejs | 209 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 206 insertions(+), 3 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 6c41aada..0700a894 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -35,6 +35,28 @@
 
 <%- include('partials/header', { home: true, menu: false }) -%>
 
+<style>
+  .breadcrumb {
+    float: left;
+    cursor: pointer;
+  }
+  .paginate-header {
+    display: flex; flex-direction: row;
+    align-items: stretch;
+    justify-content: center;
+    width: 100%;
+  }
+  .breadcrumb-container {
+    list-style-type: none;
+    display: flex;
+    align-items: baseline;
+  }
+
+  #back-btn {
+    flex-grow: 1;
+  }
+</style>
+
 <section class="custom-section custom-hero p-4">
   <div class="custom-section-content mx-auto">
     <header class="py-2 flex justify-between items-center flex-wrap">
@@ -169,6 +191,37 @@
         <%- __("Join the most important crowdsource! Regardless if you're healthy or not, please submit the form below – that is also valuable information!") %></p>
     <% } %>
 
+    <div class="paginate-header">
+      <ul class="mt-4 mx-4" id="back-btn" >
+        <li>
+          <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
+        </li>
+      </ul> 
+      <ul class="mx-4 self-center text-center text-2xl breadcrumb-container">
+        <li class="breadcrumb" id="breadcrumb-1" onclick="goToPage(1)">
+          1&nbsp;
+        </li >
+        
+        <li class="breadcrumb" id="breadcrumb-2" onclick="goToPage(2)">
+          2&nbsp;
+        </li>
+        
+        <li class="breadcrumb" id="breadcrumb-3" onclick="goToPage(3)">
+          3&nbsp;
+        </li>
+
+        <li class="breadcrumb" id="breadcrumb-4" onclick="goToPage(4)">
+          4&nbsp;
+       </li>
+       
+       <li class="breadcrumb" id="breadcrumb-5" onclick="goToPage(5)">
+         5
+       </li>
+      </ul> 
+    </div>
+
+  <div id="page-1">
+
     <div class="flex flex-row items-center mt-8">
       <img src="/static/images/map.svg" alt="" class="h-16 w-16">
       <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Geography and demography") %></h3>
@@ -206,11 +259,18 @@
         <span>- </span><a class="text-cvs-red font-bold hover:underline" href="<%= __(`https://www.whatismyzip.com`) %>" target="_blank"><%= __('What is my Zip code?') %></a>
       <% } %>
     </label>
-    <input class="appearance-none border rounded py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required type="text" pattern="<%= locals.zipPattern %>" name="postal-code" id="postal-code" placeholder="<%= locals.zipPlaceHolder %>" value="<%= postalCode %>">
+    <input class="appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required type="text" pattern="<%= locals.zipPattern %>" name="postal-code" id="postal-code" placeholder="<%= locals.zipPlaceHolder %>" value="<%= postalCode %>">
+    <ul class="mt-4">
+      <li>
+        <input class="inverse" type="button" onclick="nextPage(validateDemographicsAndGeography)" value="<%= __('Next') %>">
+      </li>
+    </ul>
+  </div>
 
+  <div id="page-2">
     <div class="flex flex-row items-center mt-8">
       <img src="/static/images/mask.svg" alt="" class="h-16 w-16">
-      <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Testing and symptoms") %></h3>
+      <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Testing and isolation") %></h3>
     </div>
 
     <fieldset>
@@ -254,6 +314,42 @@
       </fieldset>
     </div>
 
+
+    <fieldset>
+      <legend><%= __('I am currently:')%></legend>
+      <p class="mb-2">
+        <input required type="radio" id="not-in-isolation" name="isolation-status" value="not-in-isolation" <%= isolationStatus === 'NOT_IN_ISOLATION' ? 'checked' : '' %>>
+        <label for="not-in-isolation"><%= __("Not in isolation") %></label>
+      </p>
+      <p class="mb-2">
+        <input required type="radio" id="isolation-due-to-travel" name="isolation-status" value="isolation-due-to-travel" <%= isolationStatus === 'ISOLATION_DUE_TO_TRAVEL' ? 'checked' : '' %>>
+        <label for="isolation-due-to-travel"><%= __("In isolation due to a recent international travel") %></label>
+      </p>
+      <p class="mb-2">
+        <input required type="radio" id="isolation-due-to-contact" name="isolation-status" value="isolation-due-to-contact" <%= isolationStatus === 'ISOLATION_DUE_TO_CONTACT' ? 'checked' : '' %>>
+        <label for="isolation-due-to-contact"><%= __("In isolation due to contact with an individual who has been exposed to the coronavirus.") %></label>
+      </p>
+      <p class="mb-2">
+        <input required type="radio" id="isolation-due-to-government" name="isolation-status" value="isolation-due-to-government" <%= isolationStatus === 'ISOLATION_DUE_TO_GOVERNMENT_ORDERS' ? 'checked' : '' %>>
+        <label for="isolation-due-to-government"><%= __("In isolation due to orders from the government") %></label>
+      </p>
+      <p>
+        <input required type="radio" id="isolation-due-to-covid-19" name="isolation-status" value="isolation-due-to-covid-19" <%= isolationStatus === 'ISOLATION_DUE_TO_COVID_19' ? 'checked' : '' %>>
+        <label for="isolation-due-to-covid-19"><%= __("In isolation due to COVID-19 infection") %></label>
+      </p>
+      </fieldset>
+      <ul class="mt-4">
+        <li>
+          <input class="inverse" type="button" onclick="nextPage(validateTestingAndIsolation)" value="<%= __('Next') %>">
+        </li>
+      </ul>
+  </div>
+
+  <div id="page-3">
+    <div class="flex flex-row items-center mt-8">
+      <img src="/static/images/symptoms.svg" alt="" class="h-16 w-16">
+      <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Symptoms") %></h3>
+    </div>
     <fieldset>
     <legend class="mb-0"><%= __('Symptoms you have experienced') %></legend>
     <p class="mb-4"><%- __('Select only the symptoms you have experienced') %></p>
@@ -346,7 +442,18 @@
         id="symptom-start"
         value="<%= symptomStart %>">
     </div>
+    <ul class="mt-4">
+      <li>
+        <input class="inverse" type="button" onclick="nextPage(validateSymptoms)" value="<%= __('Next') %>">
+      </li>
+    </ul> 
+  </div>
 
+  <div id="page-4">
+    <div class="flex flex-row items-center mt-8">
+      <img src="/static/images/doctor.svg" alt="" class="h-16 w-16">
+      <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Health") %></h3>
+    </div>
     <fieldset>
     <legend class="mb-0"><%= __('Have you been diagnosed with any of the following conditions?')%></legend>
     <p class="mb-4"><%= __('Diabetes mellitus, Hypertension, Ischemic heart disease, Asthma, Chronic lung disease, Chronic kidney disease') %></p>
@@ -416,8 +523,18 @@
       id="body-temperature"
       value="<%= bodyTemperature %>"
     >
+    <ul class="mt-4">
+      <li>
+        <input class="inverse" type="button" onclick="nextPage(validateHealth)" value="<%= __('Next') %>">
+      </li>
+    </ul> 
+  </div>
 
-
+  <div id="page-5">
+    <div class="flex flex-row items-center mt-8">
+      <img src="/static/images/napkin.svg" alt="" class="h-16 w-16">
+      <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Privacy and submit") %></h3>
+    </div>
     <h3 class="text-cvs-red text-xl font-bold m-4 ml-0 mt-8 mb-0"><%= __("How will my data be used?") %></h3>
 
     <p class="mt-0 mb-4"><%= __('Your health information is stored anonymously, and can not be used to identify you.')%><br />
@@ -446,6 +563,7 @@
         <input class="inverse custom-nav-link rounded-full text-base text-white mt-2 font-medium px-5 py-3" type="submit" value="<%= __('Submit report') %>">
       </li>
     </ul>
+  </div>
   </form>
 </section>
 
@@ -555,4 +673,89 @@
   var obfuscatePath = true;
 </script>
 
+<script>
+  /* Pagination
+
+  */
+ const numPages = 5;
+ var currentPage = 1;
+
+ function nextPage(validationFunction) {
+   if (validationFunction) {
+      if (validationFunction()) {
+        currentPage = currentPage + 1;
+        updatePaginate();
+      }
+   } else {
+     /* no validation function given */
+   currentPage = currentPage + 1;
+   updatePaginate();
+   }
+ }
+
+ function previousPage() {
+   currentPage = currentPage - 1;
+   updatePaginate();
+ }
+
+ function goToPage(page) {
+  currentPage = page;
+  updatePaginate();
+ }
+
+ function renderBackButton() {
+   const back = document.getElementById("back-btn");
+   if (currentPage != 1) {
+    back.style.display = "block";
+   } else {
+    back.style.display = "none";
+   }
+ }
+
+ function updatePaginate() {
+  for (var i = 1; i <= numPages; i++) {
+    var page = document.getElementById(`page-${i}`);
+    var breadcrumb = document.getElementById(`breadcrumb-${i}`);
+    if (i === currentPage) {
+      page.style.display = "block";
+      breadcrumb.style.color = "white";
+      breadcrumb.classList.add("text-4xl");
+
+    } else {
+      page.style.display = "none";
+      breadcrumb.style.color = "black";
+      breadcrumb.classList.remove("text-4xl");
+    }
+  }
+  renderBackButton();
+ }
+ updatePaginate();
+
+
+</script>
+
+<script>
+  /* Page validation functions. 
+  If validation fails and messages to be displayed should be dispatched in the validation function. */
+  const validateDemographicsAndGeography = () => {
+    return true;
+  }
+
+  const validateTestingAndIsolation = () => {
+    return true;
+  }
+
+  const validateSymptoms = () => {
+    return true;
+  }
+
+  const validateHealth = () => {
+    return true;
+  }
+
+  const validatePrivacyAndSubmit = () => {
+    return true;
+  }
+</script>
+
 <%- include('partials/footer', { home: true }) -%>

From 6b928d35fe6566b450384284cc97b5b93cb65606 Mon Sep 17 00:00:00 2001
From: Amrit Nagi <amrit@astrava.solutions>
Date: Mon, 30 Mar 2020 20:32:32 +0100
Subject: [PATCH 02/31] WIP steps

---
 app/views/pages/report.ejs | 100 +++++++++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 0700a894..027632e0 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -218,8 +218,108 @@
          5
        </li>
       </ul> 
+
     </div>
 
+    <div class="max-w-4xl mx-auto my-4 border-b-2 pb-4">	
+      <div class="flex pb-3">
+
+        
+    
+        <div class="flex-1">
+          <div class="w-10 h-10 bg-cvs-green-dark mx-auto rounded-full text-lg text-white flex items-center">
+            <svg class="mx-auto h-8 w-8 text-white"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </div>
+        </div>
+    
+    
+        <div class="w-12 md:w-24 align-center items-center align-middle content-center flex">
+          <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
+             <div class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 100%"></div>
+          </div>
+        </div>
+      
+        
+        <div class="flex-1">
+          <div class="w-10 h-10 bg-cvs-green-dark mx-auto rounded-full text-lg text-white flex items-center">
+            <svg class="mx-auto h-8 w-8 text-white"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </div>
+        </div>
+      
+        <div class="w-12 md:w-24 align-center items-center align-middle content-center flex">
+          <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
+             <div class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 30%"></div>
+          </div>
+        </div>
+      
+        <div class="flex-1">
+          <div class="w-10 h-10 bg-cvs-green-light border-2 border-cvs-green-dark mx-auto rounded-full text-lg flex items-center">
+            <span class="text-gray-800 text-center w-full">3</span>
+          </div>
+        </div>
+      
+      
+        <div class="w-12 md:w-24 align-center items-center align-middle content-center flex">
+          <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
+             <div class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 0%"></div>
+          </div>
+        </div>
+    
+    
+        <div class="flex-1">
+          <div class="w-10 h-10 bg-cvs-green-light border-2 border-cvs-green-dark mx-auto rounded-full text-lg flex items-center">
+            <span class="text-gray-800 text-center w-full">4</span>
+          </div>
+        </div>
+
+        <div class="w-12 md:w-24 align-center items-center align-middle content-center flex">
+          <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
+             <div class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 0%"></div>
+          </div>
+        </div>
+      
+        <div class="flex-1">
+          <div class="w-10 h-10 bg-cvs-green-light border-2 border-cvs-green-dark mx-auto rounded-full text-lg flex items-center">
+            <span class="text-gray-800 text-center w-full">5</span>
+          </div>
+        </div>
+      
+        <div class="flex-1"></div>
+
+
+
+      </div>
+      
+      <div class="flex text-xs content-center text-center">
+        <div class="w-1/5">
+          About You
+        </div>
+        
+        <div class="w-1/5">
+          Testing & Isolation
+        </div>
+        
+        <div class="w-1/5">
+          Symptoms
+        </div>
+        
+        <div class="w-1/5">
+          Health
+        </div>	
+
+        <div class="w-1/5">
+          Submit
+        </div>		
+
+      </div>
+      
+    </div>
+
+
   <div id="page-1">
 
     <div class="flex flex-row items-center mt-8">

From a9d8e8ecc4c1e80c942b894ed8939cfd880ca3eb Mon Sep 17 00:00:00 2001
From: Amrit Nagi <amrit@astrava.solutions>
Date: Mon, 30 Mar 2020 20:52:22 +0100
Subject: [PATCH 03/31] Aligned text

---
 app/views/pages/report.ejs | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 027632e0..8eaf043c 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -224,7 +224,7 @@
     <div class="max-w-4xl mx-auto my-4 border-b-2 pb-4">	
       <div class="flex pb-3">
 
-        
+        <div class="w-auto sm:w-8 md:w-12"></div>
     
         <div class="flex-1">
           <div class="w-10 h-10 bg-cvs-green-dark mx-auto rounded-full text-lg text-white flex items-center">
@@ -235,7 +235,7 @@
         </div>
     
     
-        <div class="w-12 md:w-24 align-center items-center align-middle content-center flex">
+        <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex">
           <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
              <div class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 100%"></div>
           </div>
@@ -250,7 +250,7 @@
           </div>
         </div>
       
-        <div class="w-12 md:w-24 align-center items-center align-middle content-center flex">
+        <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex">
           <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
              <div class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 30%"></div>
           </div>
@@ -263,7 +263,7 @@
         </div>
       
       
-        <div class="w-12 md:w-24 align-center items-center align-middle content-center flex">
+        <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex">
           <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
              <div class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 0%"></div>
           </div>
@@ -276,7 +276,7 @@
           </div>
         </div>
 
-        <div class="w-12 md:w-24 align-center items-center align-middle content-center flex">
+        <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex">
           <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
              <div class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 0%"></div>
           </div>
@@ -288,7 +288,7 @@
           </div>
         </div>
       
-        <div class="flex-1"></div>
+        <div class="w-auto sm:w-8 md:w-12"></div>
 
 
 
@@ -296,7 +296,7 @@
       
       <div class="flex text-xs content-center text-center">
         <div class="w-1/5">
-          About You
+          Demography and geography
         </div>
         
         <div class="w-1/5">
@@ -312,11 +312,11 @@
         </div>	
 
         <div class="w-1/5">
-          Submit
+          Submit & Share
         </div>		
 
       </div>
-      
+
     </div>
 
 
@@ -859,3 +859,4 @@
 </script>
 
 <%- include('partials/footer', { home: true }) -%>
+

From 7069ca3ea4ae8ca7797575ffa7ca5203c39974e4 Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Mon, 30 Mar 2020 16:04:23 -0400
Subject: [PATCH 04/31] paginate report.ejs

---
 app/views/pages/report.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 8eaf043c..b7425fec 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -226,7 +226,7 @@
 
         <div class="w-auto sm:w-8 md:w-12"></div>
     
-        <div class="flex-1">
+        <div class="flex-1 breadcrumb" id="breadcrumb-1" onclick="goToPage(1)">
           <div class="w-10 h-10 bg-cvs-green-dark mx-auto rounded-full text-lg text-white flex items-center">
             <svg class="mx-auto h-8 w-8 text-white"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>

From 4bc3fc0e3da0eafe6a884704e52ab76e3a71b2ad Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Mon, 30 Mar 2020 16:05:39 -0400
Subject: [PATCH 05/31] report.ejs

---
 app/views/pages/report.ejs | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index b7425fec..de73c508 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -788,8 +788,8 @@
       }
    } else {
      /* no validation function given */
-   currentPage = currentPage + 1;
-   updatePaginate();
+    currentPage = currentPage + 1;
+    updatePaginate();
    }
  }
 
@@ -836,9 +836,10 @@
 
 <script>
   /* Page validation functions. 
-  If validation fails and messages to be displayed should be dispatched in the validation function. */
+  If validation fails and messages to be displayed should be dispatched in the validation function.
+  These aren't done */
   const validateDemographicsAndGeography = () => {
-    return true;
+      return true;
   }
 
   const validateTestingAndIsolation = () => {
@@ -852,10 +853,6 @@
   const validateHealth = () => {
     return true;
   }
-
-  const validatePrivacyAndSubmit = () => {
-    return true;
-  }
 </script>
 
 <%- include('partials/footer', { home: true }) -%>

From 8b4f9016f421922295659b330fea00c89e3160f6 Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Mon, 30 Mar 2020 17:09:47 -0400
Subject: [PATCH 06/31] made breadcrumbs dynamic

---
 app/views/pages/report.ejs | 161 ++++++++++++++++++++-----------------
 1 file changed, 86 insertions(+), 75 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index de73c508..52367080 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -37,24 +37,8 @@
 
 <style>
   .breadcrumb {
-    float: left;
     cursor: pointer;
   }
-  .paginate-header {
-    display: flex; flex-direction: row;
-    align-items: stretch;
-    justify-content: center;
-    width: 100%;
-  }
-  .breadcrumb-container {
-    list-style-type: none;
-    display: flex;
-    align-items: baseline;
-  }
-
-  #back-btn {
-    flex-grow: 1;
-  }
 </style>
 
 <section class="custom-section custom-hero p-4">
@@ -191,36 +175,7 @@
         <%- __("Join the most important crowdsource! Regardless if you're healthy or not, please submit the form below – that is also valuable information!") %></p>
     <% } %>
 
-    <div class="paginate-header">
-      <ul class="mt-4 mx-4" id="back-btn" >
-        <li>
-          <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
-        </li>
-      </ul> 
-      <ul class="mx-4 self-center text-center text-2xl breadcrumb-container">
-        <li class="breadcrumb" id="breadcrumb-1" onclick="goToPage(1)">
-          1&nbsp;
-        </li >
-        
-        <li class="breadcrumb" id="breadcrumb-2" onclick="goToPage(2)">
-          2&nbsp;
-        </li>
-        
-        <li class="breadcrumb" id="breadcrumb-3" onclick="goToPage(3)">
-          3&nbsp;
-        </li>
-
-        <li class="breadcrumb" id="breadcrumb-4" onclick="goToPage(4)">
-          4&nbsp;
-       </li>
-       
-       <li class="breadcrumb" id="breadcrumb-5" onclick="goToPage(5)">
-         5
-       </li>
-      </ul> 
-
-    </div>
-
+   
     <div class="max-w-4xl mx-auto my-4 border-b-2 pb-4">	
       <div class="flex pb-3">
 
@@ -235,14 +190,14 @@
         </div>
     
     
-        <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex">
+        <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex" >
           <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
-             <div class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 100%"></div>
+             <div id="progress-bar-1" class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 100%"></div>
           </div>
         </div>
       
         
-        <div class="flex-1">
+        <div class="flex-1 breadcrumb" id="breadcrumb-2" onclick="goToPage(2)">
           <div class="w-10 h-10 bg-cvs-green-dark mx-auto rounded-full text-lg text-white flex items-center">
             <svg class="mx-auto h-8 w-8 text-white"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
@@ -252,11 +207,11 @@
       
         <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex">
           <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
-             <div class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 30%"></div>
+             <div id="progress-bar-2" class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 30%"></div>
           </div>
         </div>
       
-        <div class="flex-1">
+        <div class="flex-1 breadcrumb" id="breadcrumb-3" onclick="goToPage(3)">
           <div class="w-10 h-10 bg-cvs-green-light border-2 border-cvs-green-dark mx-auto rounded-full text-lg flex items-center">
             <span class="text-gray-800 text-center w-full">3</span>
           </div>
@@ -265,12 +220,12 @@
       
         <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex">
           <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
-             <div class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 0%"></div>
+             <div id="progress-bar-3" class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 0%"></div>
           </div>
         </div>
     
     
-        <div class="flex-1">
+        <div class="flex-1 breadcrumb" id="breadcrumb-4" onclick="goToPage(4)">
           <div class="w-10 h-10 bg-cvs-green-light border-2 border-cvs-green-dark mx-auto rounded-full text-lg flex items-center">
             <span class="text-gray-800 text-center w-full">4</span>
           </div>
@@ -278,11 +233,11 @@
 
         <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex">
           <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
-             <div class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 0%"></div>
+             <div id="progress-bar-4" class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 0%"></div>
           </div>
         </div>
       
-        <div class="flex-1">
+        <div class="flex-1 breadcrumb" id="breadcrumb-5" onclick="goToPage(5)">
           <div class="w-10 h-10 bg-cvs-green-light border-2 border-cvs-green-dark mx-auto rounded-full text-lg flex items-center">
             <span class="text-gray-800 text-center w-full">5</span>
           </div>
@@ -295,23 +250,23 @@
       </div>
       
       <div class="flex text-xs content-center text-center">
-        <div class="w-1/5">
+        <div class="w-1/5 breadcrumb" onclick="goToPage(1)" >
           Demography and geography
         </div>
         
-        <div class="w-1/5">
+        <div class="w-1/5 breadcrumb" onclick="goToPage(2)">
           Testing & Isolation
         </div>
         
-        <div class="w-1/5">
+        <div class="w-1/5 breadcrumb" onclick="goToPage(3)">
           Symptoms
         </div>
         
-        <div class="w-1/5">
+        <div class="w-1/5 breadcrumb" onclick="goToPage(4)">
           Health
         </div>	
 
-        <div class="w-1/5">
+        <div class="w-1/5 breadcrumb" onclick="goToPage(5)">
           Submit & Share
         </div>		
 
@@ -440,6 +395,7 @@
       </fieldset>
       <ul class="mt-4">
         <li>
+          <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
           <input class="inverse" type="button" onclick="nextPage(validateTestingAndIsolation)" value="<%= __('Next') %>">
         </li>
       </ul>
@@ -544,6 +500,7 @@
     </div>
     <ul class="mt-4">
       <li>
+        <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
         <input class="inverse" type="button" onclick="nextPage(validateSymptoms)" value="<%= __('Next') %>">
       </li>
     </ul> 
@@ -625,6 +582,7 @@
     >
     <ul class="mt-4">
       <li>
+        <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
         <input class="inverse" type="button" onclick="nextPage(validateHealth)" value="<%= __('Next') %>">
       </li>
     </ul> 
@@ -660,7 +618,8 @@
     <ul class="mt-4">
       <li>
         <input type="hidden" name="passcode" value="<%= passcode %>" />
-        <input class="inverse custom-nav-link rounded-full text-base text-white mt-2 font-medium px-5 py-3" type="submit" value="<%= __('Submit report') %>">
+        <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
+        <input class="inverse" type="submit" value="<%= __('Submit report') %>">
       </li>
     </ul>
   </div>
@@ -780,6 +739,10 @@
  const numPages = 5;
  var currentPage = 1;
 
+ /*increase page number by 1 and rerender the form. 
+ An optional validation function can be used to validate the contents of a page 
+ before you can move to the next page
+ */
  function nextPage(validationFunction) {
    if (validationFunction) {
       if (validationFunction()) {
@@ -793,43 +756,91 @@
    }
  }
 
+ //decrease page number by 1 and rerender the form
  function previousPage() {
    currentPage = currentPage - 1;
    updatePaginate();
  }
 
+ //updates page number to a specific page (page) and then rerenders the paginated form
  function goToPage(page) {
   currentPage = page;
   updatePaginate();
  }
 
- function renderBackButton() {
-   const back = document.getElementById("back-btn");
-   if (currentPage != 1) {
-    back.style.display = "block";
-   } else {
-    back.style.display = "none";
-   }
+ //Creates inner html for a breadcrumb which is incomplete and displays a number (i)
+ function incompleteBreadcrumb(breadcrumb, i) {
+  var breadcontent = document.createElement("div");
+      breadcontent.classList.add("w-10");
+      breadcontent.classList.add("h-10");
+      breadcontent.classList.add("bg-cvs-green-light");
+      breadcontent.classList.add("border-2");
+      breadcontent.classList.add("border-cvs-green-dark");
+      breadcontent.classList.add("mx-auto");
+      breadcontent.classList.add("rounded-full");
+      breadcontent.classList.add("text-lg");
+      breadcontent.classList.add("flex");
+      breadcontent.classList.add("items-center");
+      
+      var span = document.createElement("span");
+      span.classList.add("text-gray-800");
+      span.classList.add("text-center");
+      span.classList.add("w-full");
+      span.innerText = `${i}`;
+      
+      breadcontent.appendChild(span);
+      breadcrumb.appendChild(breadcontent);
+      breadcrumb.onclick = () => {};
+ }
+
+ //Creates inner html for a breadcrumb which is marked complete with a check mark
+ function completeBreadcrumb(breadcrumb, i) {
+  var breadcontent = document.createElement("div");
+      breadcontent.classList.add("w-10");
+      breadcontent.classList.add("h-10");
+      breadcontent.classList.add("bg-cvs-green-dark");
+      breadcontent.classList.add("mx-auto");
+      breadcontent.classList.add("rounded-full");
+      breadcontent.classList.add("text-lg");
+      breadcontent.classList.add("text-white");
+      breadcontent.classList.add("flex");
+      breadcontent.classList.add("items-center");
+      breadcontent.innerHTML = `<svg class="mx-auto h-8 w-8 text-white"  fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg>`;
+      breadcrumb.appendChild(breadcontent);
+      breadcrumb.onclick = () => goToPage(i);
+ }
+
+ /*Applies updates to a progress bar given it's id number (i). 
+ If it can't find a progress bar with the id it does nothing*/
+ function updateProgressBar(i, percent) {
+  var bar = document.getElementById(`progress-bar-${i}`);
+  if (bar) {
+    bar.style.width = percent;
+  }
  }
 
  function updatePaginate() {
   for (var i = 1; i <= numPages; i++) {
     var page = document.getElementById(`page-${i}`);
     var breadcrumb = document.getElementById(`breadcrumb-${i}`);
+    breadcrumb.textContent = '';
+
     if (i === currentPage) {
+      incompleteBreadcrumb(breadcrumb, i);
+      updateProgressBar(i, "50%")
       page.style.display = "block";
-      breadcrumb.style.color = "white";
-      breadcrumb.classList.add("text-4xl");
-
+    } else if (i < currentPage) {
+      completeBreadcrumb(breadcrumb, i);
+      updateProgressBar(i, "100%")
+      page.style.display = "none";
     } else {
+      incompleteBreadcrumb(breadcrumb, i);
+      updateProgressBar(i, "0%")
       page.style.display = "none";
-      breadcrumb.style.color = "black";
-      breadcrumb.classList.remove("text-4xl");
     }
   }
-  renderBackButton();
  }
- updatePaginate();
+ updatePaginate();//initalize the pagination
 
 
 </script>

From fcd98610ed043ef36315d51a7bbf2431a5443490 Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Mon, 30 Mar 2020 17:22:28 -0400
Subject: [PATCH 07/31] breadcrumbs link if that page is validated

---
 app/views/pages/report.ejs | 53 ++++++++++++++++++++++++--------------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 52367080..ac1849f8 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -732,6 +732,34 @@
   var obfuscatePath = true;
 </script>
 
+<script>
+  /* Page validation functions. 
+  If validation fails and messages to be displayed should be dispatched in the validation function.
+  These aren't done */
+  const validateDemographicsAndGeography = () => {
+      return true;
+  }
+
+  const validateTestingAndIsolation = () => {
+    return true;
+  }
+
+  const validateSymptoms = () => {
+    return true;
+  }
+
+  const validateHealth = () => {
+    return true;
+  }
+
+  const validationFunctions = [
+    validateDemographicsAndGeography,
+    validateTestingAndIsolation,
+    validateSymptoms,
+    validateHealth
+  ];
+</script>
+
 <script>
   /* Pagination
 
@@ -790,7 +818,11 @@
       
       breadcontent.appendChild(span);
       breadcrumb.appendChild(breadcontent);
-      breadcrumb.onclick = () => {};
+      if (validationFunctions[i] && validationFunctions[i]()) {
+        breadcrumb.onclick = () => goToPage(i);
+      } else {
+        breadcrumb.onclick = () => {};
+      }
  }
 
  //Creates inner html for a breadcrumb which is marked complete with a check mark
@@ -845,26 +877,7 @@
 
 </script>
 
-<script>
-  /* Page validation functions. 
-  If validation fails and messages to be displayed should be dispatched in the validation function.
-  These aren't done */
-  const validateDemographicsAndGeography = () => {
-      return true;
-  }
 
-  const validateTestingAndIsolation = () => {
-    return true;
-  }
-
-  const validateSymptoms = () => {
-    return true;
-  }
-
-  const validateHealth = () => {
-    return true;
-  }
-</script>
 
 <%- include('partials/footer', { home: true }) -%>
 

From f65fd8f8583310c2c227cbe7c48187a9e75f42ad Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Tue, 31 Mar 2020 01:50:04 -0400
Subject: [PATCH 08/31] restricted breadcrumbs, moved nav buttons

---
 app/views/pages/report.ejs | 223 ++++++++++++++++++++++++++-----------
 1 file changed, 160 insertions(+), 63 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index ac1849f8..00056ed6 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -39,6 +39,19 @@
   .breadcrumb {
     cursor: pointer;
   }
+
+  .page-container {
+    width: 100%;
+  }
+
+  .next-btn {
+    float:right;
+  }
+
+  .nav-btn-container {
+    padding-left: 5%;
+    padding-right: 5%;
+  }
 </style>
 
 <section class="custom-section custom-hero p-4">
@@ -192,7 +205,7 @@
     
         <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex" >
           <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
-             <div id="progress-bar-1" class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 100%"></div>
+             <div id="progress-bar-1" class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 50%"></div>
           </div>
         </div>
       
@@ -207,7 +220,7 @@
       
         <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex">
           <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
-             <div id="progress-bar-2" class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 30%"></div>
+             <div id="progress-bar-2" class="bg-cvs-green-dark text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 0%"></div>
           </div>
         </div>
       
@@ -275,7 +288,7 @@
     </div>
 
 
-  <div id="page-1">
+  <div id="page-1" class="page-container">
 
     <div class="flex flex-row items-center mt-8">
       <img src="/static/images/map.svg" alt="" class="h-16 w-16">
@@ -315,14 +328,14 @@
       <% } %>
     </label>
     <input class="appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required type="text" pattern="<%= locals.zipPattern %>" name="postal-code" id="postal-code" placeholder="<%= locals.zipPlaceHolder %>" value="<%= postalCode %>">
-    <ul class="mt-4">
+    <ul class="mt-4 nav-btn-container">
       <li>
-        <input class="inverse" type="button" onclick="nextPage(validateDemographicsAndGeography)" value="<%= __('Next') %>">
+        <input class="inverse next-btn" type="button" onclick="nextPage(validateDemographicsAndGeography)" value="<%= __('Next') %>">
       </li>
     </ul>
   </div>
 
-  <div id="page-2">
+  <div id="page-2" class="page-container">
     <div class="flex flex-row items-center mt-8">
       <img src="/static/images/mask.svg" alt="" class="h-16 w-16">
       <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Testing and isolation") %></h3>
@@ -393,15 +406,15 @@
         <label for="isolation-due-to-covid-19"><%= __("In isolation due to COVID-19 infection") %></label>
       </p>
       </fieldset>
-      <ul class="mt-4">
+      <ul class="mt-4 nav-btn-container">
         <li>
           <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
-          <input class="inverse" type="button" onclick="nextPage(validateTestingAndIsolation)" value="<%= __('Next') %>">
+          <input class="inverse next-btn" type="button" onclick="nextPage(validateTestingAndIsolation)" value="<%= __('Next') %>">
         </li>
       </ul>
   </div>
 
-  <div id="page-3">
+  <div id="page-3" class="page-container">
     <div class="flex flex-row items-center mt-8">
       <img src="/static/images/symptoms.svg" alt="" class="h-16 w-16">
       <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Symptoms") %></h3>
@@ -411,79 +424,79 @@
     <p class="mb-4"><%- __('Select only the symptoms you have experienced') %></p>
 
     <label class="checkbox" for="symptom-cough">
-      <input type="checkbox" id="symptom-cough" name="symptom-cough" <%= symptomDryCough ? 'checked' : '' %>>
+      <input type="checkbox" class="symptom" id="symptom-cough" name="symptom-cough" <%= symptomDryCough ? 'checked' : '' %>>
       <span><%= __('Dry cough') %></span>
       <span class="checkmark"></span>
     </label>
 
     <label class="checkbox" for="symptom-slime-cough">
-      <input type="checkbox" id="symptom-slime-cough" name="symptom-slime-cough" <%= symptomSlimeCough ? 'checked' : '' %>>
+      <input type="checkbox" class="symptom" id="symptom-slime-cough" name="symptom-slime-cough" <%= symptomSlimeCough ? 'checked' : '' %>>
       <span><%= __('Mucus cough') %></span>
       <span class="checkmark"></span>
     </label>
 
     <label class="checkbox" for="symptom-fatigue">
-      <input type="checkbox" id="symptom-fatigue" name="symptom-fatigue" <%= symptomFatigue ? 'checked' : '' %>>
+      <input type="checkbox" class="symptom" id="symptom-fatigue" name="symptom-fatigue" <%= symptomFatigue ? 'checked' : '' %>>
       <span><%= __('Fatigue and exhaustion') %></span>
       <span class="checkmark"></span>
     </label>
 
     <label class="checkbox" for="symptom-fever">
-      <input type="checkbox" id="symptom-fever" name="symptom-fever" <%= symptomFever ? 'checked' : '' %>>
+      <input type="checkbox" class="symptom" id="symptom-fever" name="symptom-fever" <%= symptomFever ? 'checked' : '' %>>
       <span><%= __('Fever') %></span>
       <span class="checkmark"></span>
     </label>
 
     <label class="checkbox" for="symptom-heavy-breath">
-      <input type="checkbox" id="symptom-heavy-breath" name="symptom-heavy-breath" <%= symptomHeavyBreathing ? 'checked' : '' %>>
+      <input type="checkbox" class="symptom" id="symptom-heavy-breath" name="symptom-heavy-breath" <%= symptomHeavyBreathing ? 'checked' : '' %>>
       <span><%= __('Shortness of breath') %></span>
       <span class="checkmark"></span>
     </label>
 
     <label class="checkbox" for="symptom-muscle-pain">
-      <input type="checkbox" id="symptom-muscle-pain" name="symptom-muscle-pain" <%= symptomMuscleAching ? 'checked' : '' %>>
+      <input type="checkbox" class="symptom" id="symptom-muscle-pain" name="symptom-muscle-pain" <%= symptomMuscleAching ? 'checked' : '' %>>
       <span><%= __('Muscle pain') %></span>
       <span class="checkmark"></span>
     </label>
 
     <label class="checkbox" for="symptom-diarrhea">
-      <input type="checkbox" id="symptom-diarrhea" name="symptom-diarrhea" <%= symptomDiarrhea ? 'checked' : '' %>>
+      <input type="checkbox" class="symptom" id="symptom-diarrhea" name="symptom-diarrhea" <%= symptomDiarrhea ? 'checked' : '' %>>
       <span><%= __('Diarrhea') %></span>
       <span class="checkmark"></span>
     </label>
 
     <label class="checkbox" for="symptom-headache">
-      <input type="checkbox" id="symptom-headache" name="symptom-headache" <%= symptomHeadache ? 'checked' : '' %>>
+      <input type="checkbox" class="symptom" id="symptom-headache" name="symptom-headache" <%= symptomHeadache ? 'checked' : '' %>>
       <span><%= __('Headache') %></span>
       <span class="checkmark"></span>
     </label>
 
     <label class="checkbox" for="symptom-sore-throat">
-      <input type="checkbox" id="symptom-sore-throat" name="symptom-sore-throat" <%= symptomSoreThroat ? 'checked' : '' %>>
+      <input type="checkbox" class="symptom" id="symptom-sore-throat" name="symptom-sore-throat" <%= symptomSoreThroat ? 'checked' : '' %>>
       <span><%= __('Sore throat') %></span>
       <span class="checkmark"></span>
     </label>
 
     <label class="checkbox" for="symptom-no-smell">
-      <input type="checkbox" id="symptom-no-smell" name="symptom-no-smell" <%= symptomNoSmell ? 'checked' : '' %>>
+      <input type="checkbox" class="symptom" id="symptom-no-smell" name="symptom-no-smell" <%= symptomNoSmell ? 'checked' : '' %>>
       <span><%= __('Loss of sense of smell') %></span>
       <span class="checkmark"></span>
     </label>
 
     <label class="checkbox" for="symptom-no-taste">
-      <input type="checkbox" id="symptom-no-taste" name="symptom-no-taste" <%= symptomNoTaste ? 'checked' : '' %>>
+      <input type="checkbox" class="symptom" id="symptom-no-taste" name="symptom-no-taste" <%= symptomNoTaste ? 'checked' : '' %>>
       <span><%= __('Loss of sense of taste') %></span>
       <span class="checkmark"></span>
     </label>
 
     <label class="checkbox" for="symptom-runny-nose">
-      <input type="checkbox" id="symptom-runny-nose" name="symptom-runny-nose" <%= symptomRunnyNose ? 'checked' : '' %>>
+      <input type="checkbox" class="symptom" id="symptom-runny-nose" name="symptom-runny-nose" <%= symptomRunnyNose ? 'checked' : '' %>>
       <span><%= __('Stuffy or runny nose') %></span>
       <span class="checkmark"></span>
     </label>
 
     <label class="checkbox" for="symptom-nausea-or-vomiting">
-      <input type="checkbox" id="symptom-nausea-or-vomiting" name="symptom-nausea-or-vomiting" <%= symptomNauseaOrVomiting ? 'checked' : '' %>>
+      <input type="checkbox" class="symptom" id="symptom-nausea-or-vomiting" name="symptom-nausea-or-vomiting" <%= symptomNauseaOrVomiting ? 'checked' : '' %>>
       <span><%= __('Nausea or vomiting') %></span>
       <span class="checkmark"></span>
     </label>
@@ -498,15 +511,15 @@
         id="symptom-start"
         value="<%= symptomStart %>">
     </div>
-    <ul class="mt-4">
+    <ul class="mt-4 nav-btn-container">
       <li>
         <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
-        <input class="inverse" type="button" onclick="nextPage(validateSymptoms)" value="<%= __('Next') %>">
+        <input class="inverse next-btn" type="button" onclick="nextPage(validateSymptoms)" value="<%= __('Next') %>">
       </li>
     </ul> 
   </div>
 
-  <div id="page-4">
+  <div id="page-4" class="page-container">
     <div class="flex flex-row items-center mt-8">
       <img src="/static/images/doctor.svg" alt="" class="h-16 w-16">
       <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Health") %></h3>
@@ -580,18 +593,18 @@
       id="body-temperature"
       value="<%= bodyTemperature %>"
     >
-    <ul class="mt-4">
+    <ul class="mt-4 nav-btn-container" >
       <li>
         <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
-        <input class="inverse" type="button" onclick="nextPage(validateHealth)" value="<%= __('Next') %>">
+        <input class="inverse next-btn" type="button" onclick="nextPage(validateHealth)" value="<%= __('Next') %>">
       </li>
     </ul> 
   </div>
 
-  <div id="page-5">
+  <div id="page-5" class="page-container">
     <div class="flex flex-row items-center mt-8">
       <img src="/static/images/napkin.svg" alt="" class="h-16 w-16">
-      <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Privacy and submit") %></h3>
+      <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Submit & Share") %></h3>
     </div>
     <h3 class="text-cvs-red text-xl font-bold m-4 ml-0 mt-8 mb-0"><%= __("How will my data be used?") %></h3>
 
@@ -615,11 +628,11 @@
       </label>
     </p>
 
-    <ul class="mt-4">
+    <ul class="mt-4 nav-btn-container">
       <li>
         <input type="hidden" name="passcode" value="<%= passcode %>" />
         <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
-        <input class="inverse" type="submit" value="<%= __('Submit report') %>">
+        <input class="inverse next-btn" type="submit" value="<%= __('Submit report') %>">
       </li>
     </ul>
   </div>
@@ -737,33 +750,103 @@
   If validation fails and messages to be displayed should be dispatched in the validation function.
   These aren't done */
   const validateDemographicsAndGeography = () => {
-      return true;
+      //validate age
+      var hasAge = document.getElementById("Age").value != "";
+      if (!hasAge) {
+        return [false,"<%= __('Please select a age range') %>"];
+      }
+
+      //validate sex
+      var hasGender = radioSet(document.getElementsByName("gender"));
+      if (!hasGender) {
+        return [false,"<%= __('Please select a Biological gender/Sex') %>"];
+      }
+
+      //validate zip/postal code
+      const isInt = parseInt(document.getElementById("postal-code").value);
+      const correctLength = document.getElementById("postal-code").value.length === <%= locals.zipLength %>;
+      if (!isInt || !correctLength) {
+        return [false,"<%= __('Please enter a valid postal code for your country') %>"];
+      }
+
+      return [true,undefined];
   }
 
   const validateTestingAndIsolation = () => {
-    return true;
+    //validate in close contact
+    var hasContact = radioSet(document.getElementsByName("been-in-contact-with"));
+    if (!hasContact) {
+      return [false,"<%= __('Please select whether you have been in close contact with someone who tested positive for COVID-19') %>"];
+    }
+
+    //validate tested
+    var hasTested = radioSet(document.getElementsByName("been-tested"));
+    if (!hasTested) {
+      return [false,"<%= __('Please select whether you have been tested for COVID-19?') %>"];
+    }
+
+    //validate isolation
+    var hasIsolation = radioSet(document.getElementsByName("isolation-status"));
+    if (!hasIsolation) {
+      return [false,"<%= __('Please select your isolation status') %>"];
+    }
+
+    return [true, undefined];
   }
 
   const validateSymptoms = () => {
-    return true;
+    var hasSymptom = radioSet(document.getElementsByClassName("symptom"));
+    if (hasSymptom) {
+      const validDate = Date.parse(document.getElementById("symptom-start"));
+      if (!validDate) {
+        return [false,"<%= __('Please add a start date for your symptoms') %>"];
+      }
+    }
+    return [true, undefined];
   }
 
   const validateHealth = () => {
-    return true;
+    //health condition
+    const hasHealthConditon = radioSet(document.getElementsByName("diagnosed-other-conditions"));
+    if (!hasHealthConditon) {
+      return [false,"<%= __('Please select if you have a  preexisting health condition') %>"];
+    }
+
+    //smoking
+    const hasSmoking = radioSet(document.getElementsByName("smoking-habits"));
+    if (!hasSmoking) {
+      return [false,"<%= __('Please select your smoking habits') %>"];
+    }
+
+    return [true,undefined];
+  }
+
+  const validateSumbitAndShare = () => {
+    return [true,undefined];
   }
 
   const validationFunctions = [
     validateDemographicsAndGeography,
     validateTestingAndIsolation,
     validateSymptoms,
-    validateHealth
+    validateHealth,
+    validateSumbitAndShare
   ];
+
+  function radioSet(collection) {
+    var re = false;
+    for (var i = 0; i < collection.length; i++) {
+      if (collection[i].checked) {
+        re = true;
+        break;
+      }
+    };
+    return re;
+  }
 </script>
 
 <script>
-  /* Pagination
-
-  */
+  /* Pagination */
  const numPages = 5;
  var currentPage = 1;
 
@@ -773,9 +856,13 @@
  */
  function nextPage(validationFunction) {
    if (validationFunction) {
-      if (validationFunction()) {
+     valid = validationFunction(); //[success, msg]
+      if (valid[0]) {
         currentPage = currentPage + 1;
         updatePaginate();
+      } else {
+        //show validation errors to the user here
+        valid[1] ? alert(valid[1]): false;
       }
    } else {
      /* no validation function given */
@@ -797,32 +884,41 @@
  }
 
  //Creates inner html for a breadcrumb which is incomplete and displays a number (i)
- function incompleteBreadcrumb(breadcrumb, i) {
-  var breadcontent = document.createElement("div");
-      breadcontent.classList.add("w-10");
-      breadcontent.classList.add("h-10");
-      breadcontent.classList.add("bg-cvs-green-light");
-      breadcontent.classList.add("border-2");
-      breadcontent.classList.add("border-cvs-green-dark");
-      breadcontent.classList.add("mx-auto");
-      breadcontent.classList.add("rounded-full");
-      breadcontent.classList.add("text-lg");
-      breadcontent.classList.add("flex");
-      breadcontent.classList.add("items-center");
+ function incompleteBreadcrumb(breadcrumb, i, current=false) {
+    var breadcontent = document.createElement("div");
+    breadcontent.classList.add("w-10");
+    breadcontent.classList.add("h-10");
+    breadcontent.classList.add("bg-cvs-green-light");
+    breadcontent.classList.add("border-2");
+    breadcontent.classList.add("mx-auto");
+    breadcontent.classList.add("rounded-full");
+    breadcontent.classList.add("text-lg");
+    breadcontent.classList.add("flex");
+    breadcontent.classList.add("items-center");
       
       var span = document.createElement("span");
       span.classList.add("text-gray-800");
       span.classList.add("text-center");
       span.classList.add("w-full");
       span.innerText = `${i}`;
-      
-      breadcontent.appendChild(span);
-      breadcrumb.appendChild(breadcontent);
-      if (validationFunctions[i] && validationFunctions[i]()) {
-        breadcrumb.onclick = () => goToPage(i);
-      } else {
+
+      if (current) {
+        breadcontent.classList.add("border-cvs-green-dark");
+      } 
+
+      breadcrumb.onclick = () => goToPage(i);
+      if (!validationFunctions[i-1]()[0]) {
+        breadcrumb.onclick = () => {};
+      } else if (i-2>-1 && !validationFunctions[i-2]()[0]) {
+        //pages that are valid and the previous page is invalid 
+        //(for pages that don't have required fields)
+        breadcrumb.onclick = () => {};
+      } else if (i-3>-1 && !validationFunctions[i-3]()[0]) {
         breadcrumb.onclick = () => {};
       }
+
+      breadcontent.appendChild(span);
+      breadcrumb.appendChild(breadcontent);
  }
 
  //Creates inner html for a breadcrumb which is marked complete with a check mark
@@ -858,21 +954,22 @@
     breadcrumb.textContent = '';
 
     if (i === currentPage) {
-      incompleteBreadcrumb(breadcrumb, i);
-      updateProgressBar(i, "50%")
+      incompleteBreadcrumb(breadcrumb, i, true);
+      updateProgressBar(i, "50%");
       page.style.display = "block";
     } else if (i < currentPage) {
       completeBreadcrumb(breadcrumb, i);
-      updateProgressBar(i, "100%")
+      updateProgressBar(i, "100%");
       page.style.display = "none";
     } else {
       incompleteBreadcrumb(breadcrumb, i);
-      updateProgressBar(i, "0%")
+      updateProgressBar(i, "0%");
       page.style.display = "none";
     }
   }
  }
- updatePaginate();//initalize the pagination
+ updatePaginate();
+
 
 
 </script>

From 8bb57ade794475361900532365c90401c1e86930 Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Tue, 31 Mar 2020 02:09:45 -0400
Subject: [PATCH 09/31] removed unused validation function

---
 app/views/pages/report.ejs | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 00056ed6..9cba9f1c 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -821,16 +821,12 @@
     return [true,undefined];
   }
 
-  const validateSumbitAndShare = () => {
-    return [true,undefined];
-  }
-
   const validationFunctions = [
     validateDemographicsAndGeography,
     validateTestingAndIsolation,
     validateSymptoms,
     validateHealth,
-    validateSumbitAndShare
+    () => [true,undefined]
   ];
 
   function radioSet(collection) {

From 77acb6e68a46531d22c37534532f077042067a65 Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Tue, 31 Mar 2020 02:14:13 -0400
Subject: [PATCH 10/31] simplify validationFunctions

---
 app/views/pages/report.ejs | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 9cba9f1c..a0bd990b 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -825,8 +825,7 @@
     validateDemographicsAndGeography,
     validateTestingAndIsolation,
     validateSymptoms,
-    validateHealth,
-    () => [true,undefined]
+    validateHealth
   ];
 
   function radioSet(collection) {
@@ -903,7 +902,7 @@
       } 
 
       breadcrumb.onclick = () => goToPage(i);
-      if (!validationFunctions[i-1]()[0]) {
+      if (validationFunctions[i-1] && !validationFunctions[i-1]()[0]) {
         breadcrumb.onclick = () => {};
       } else if (i-2>-1 && !validationFunctions[i-2]()[0]) {
         //pages that are valid and the previous page is invalid 

From 7caa081da668b521d55f39a9179875af17ee110a Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Tue, 31 Mar 2020 02:28:25 -0400
Subject: [PATCH 11/31] formatted breadcrumb text as translation string

---
 app/views/pages/report.ejs | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index a0bd990b..666ee717 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -264,23 +264,23 @@
       
       <div class="flex text-xs content-center text-center">
         <div class="w-1/5 breadcrumb" onclick="goToPage(1)" >
-          Demography and geography
+          <%= __('Demography and geography') %>
         </div>
         
         <div class="w-1/5 breadcrumb" onclick="goToPage(2)">
-          Testing & Isolation
+          <%= __('Testing & Isolation') %>
         </div>
         
         <div class="w-1/5 breadcrumb" onclick="goToPage(3)">
-          Symptoms
+          <%= __('Symptoms') %>
         </div>
         
         <div class="w-1/5 breadcrumb" onclick="goToPage(4)">
-          Health
+          <%= __('Health') %>
         </div>	
 
         <div class="w-1/5 breadcrumb" onclick="goToPage(5)">
-          Submit & Share
+          <%= __('Submit & Share') %>
         </div>		
 
       </div>

From c0714f4cf714fda09598acc5d5f193630349c7f3 Mon Sep 17 00:00:00 2001
From: zacel <54048016+zacel@users.noreply.github.com>
Date: Tue, 31 Mar 2020 14:58:26 -0400
Subject: [PATCH 12/31] add toastAlert

---
 app/views/pages/report.ejs | 60 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 666ee717..8465bb36 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -52,6 +52,24 @@
     padding-left: 5%;
     padding-right: 5%;
   }
+  
+  /*Toast open/load animation*/
+	.alert-toast {
+		-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+      z-index: 20000;
+	}
+	/*Toast close animation*/
+	.alert-toast input:checked ~ * {
+		-webkit-animation: fade-out-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+        animation: fade-out-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+        z-index: 10000;
+	}
+	/* -------------------------------------------------------------
+	 * Animations generated using Animista * w: http://animista.net, 
+	 * ---------------------------------------------------------- */
+	@-webkit-keyframes slide-in-top{0%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes slide-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}@keyframes slide-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}@-webkit-keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes slide-out-bottom{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}}@keyframes slide-out-bottom{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}}@-webkit-keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes fade-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}}@keyframes fade-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}}
+
 </style>
 
 <section class="custom-section custom-hero p-4">
@@ -857,7 +875,7 @@
         updatePaginate();
       } else {
         //show validation errors to the user here
-        valid[1] ? alert(valid[1]): false;
+        valid[1] ? toastAlert(valid[1]): false;
       }
    } else {
      /* no validation function given */
@@ -865,6 +883,46 @@
     updatePaginate();
    }
  }
+ 
+ //creates an alert for the user displaying given msg 
+ function toastAlert(msg) {
+   var toast = document.createElement("div");
+   toast.classList.add("alert-toast");
+   toast.classList.add("fixed");
+   toast.classList.add("bottom-0")
+   toast.classList.add("right-0");
+   toast.classList.add("m-8");
+   toast.classList.add("w-5/6");
+   toast.classList.add("md:w-full");
+   toast.classList.add("max-w-sm");
+   var input = document.createElement("input");
+   input.classList.add("hidden");
+   input.type = "checkbox";
+   input.id = "footertoast";
+   toast.appendChild(input);
+   var label = document.createElement("label");
+   label.for = "footertoast";
+   label.title = `<%= __("Close") %>`;
+   label.classList.add("close");
+   label.classList.add("cursor-pointer");
+   label.classList.add("flex");
+   label.classList.add("items-start");
+   label.classList.add("justify-between");
+   label.classList.add("w-full");
+   label.classList.add("p-2");
+   label.classList.add("bg-cvs-red");
+   label.classList.add("h-24");
+   label.classList.add("rounded");
+   label.classList.add("shadow-lg");
+   label.classList.add("text-white");
+   label.innerHTML = msg + `<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path></svg>`;
+   toast.appendChild(label);
+   toast.onclick = () => {
+    document.getElementById("footertoast").checked = "checked";
+   }
+   document.getElementsByTagName('body')[0].appendChild(toast);
+ }
+
 
  //decrease page number by 1 and rerender the form
  function previousPage() {

From 13c995945c539a1ed8e9c8e3de54e737af3f25f1 Mon Sep 17 00:00:00 2001
From: Amrit Nagi <amrit@astrava.solutions>
Date: Tue, 31 Mar 2020 21:00:07 +0100
Subject: [PATCH 13/31] Added parseInt to remove error

---
 app/views/pages/report.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 8465bb36..ed261fc1 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -782,7 +782,7 @@
 
       //validate zip/postal code
       const isInt = parseInt(document.getElementById("postal-code").value);
-      const correctLength = document.getElementById("postal-code").value.length === <%= locals.zipLength %>;
+      const correctLength = document.getElementById("postal-code").value.length === parseInt("<%= locals.zipLength %>");
       if (!isInt || !correctLength) {
         return [false,"<%= __('Please enter a valid postal code for your country') %>"];
       }

From ac2e7371dcdd6bed6a23e7a44a663507bed986af Mon Sep 17 00:00:00 2001
From: Amrit Nagi <amrit@astrava.solutions>
Date: Tue, 31 Mar 2020 21:49:37 +0100
Subject: [PATCH 14/31] Added fixes

---
 app/views/pages/report.ejs | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index ed261fc1..26d026a5 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -281,23 +281,23 @@
       </div>
       
       <div class="flex text-xs content-center text-center">
-        <div class="w-1/5 breadcrumb" onclick="goToPage(1)" >
+        <div class="w-1/5 breadcrumb">
           <%= __('Demography and geography') %>
         </div>
         
-        <div class="w-1/5 breadcrumb" onclick="goToPage(2)">
+        <div class="w-1/5 breadcrumb">
           <%= __('Testing & Isolation') %>
         </div>
         
-        <div class="w-1/5 breadcrumb" onclick="goToPage(3)">
+        <div class="w-1/5 breadcrumb">
           <%= __('Symptoms') %>
         </div>
         
-        <div class="w-1/5 breadcrumb" onclick="goToPage(4)">
+        <div class="w-1/5 breadcrumb">
           <%= __('Health') %>
         </div>	
 
-        <div class="w-1/5 breadcrumb" onclick="goToPage(5)">
+        <div class="w-1/5 breadcrumb">
           <%= __('Submit & Share') %>
         </div>		
 
@@ -345,7 +345,7 @@
         <span>- </span><a class="text-cvs-red font-bold hover:underline" href="<%= __(`https://www.whatismyzip.com`) %>" target="_blank"><%= __('What is my Zip code?') %></a>
       <% } %>
     </label>
-    <input class="appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required type="text" pattern="<%= locals.zipPattern %>" name="postal-code" id="postal-code" placeholder="<%= locals.zipPlaceHolder %>" value="<%= postalCode %>">
+    <input class="appearance-none border rounded py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required type="text" pattern="<%= locals.zipPattern %>" name="postal-code" id="postal-code" placeholder="<%= locals.zipPlaceHolder %>" value="<%= postalCode %>">
     <ul class="mt-4 nav-btn-container">
       <li>
         <input class="inverse next-btn" type="button" onclick="nextPage(validateDemographicsAndGeography)" value="<%= __('Next') %>">
@@ -523,7 +523,7 @@
     <div id="symptom-start-question" style="display: none;">
       <label for="symptom-start"><%= __('When did the symptoms start?')%></label>
       <input
-        class="appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        class="appearance-none border rounded py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
         type="date"
         name="symptom-start"
         id="symptom-start"
@@ -782,7 +782,7 @@
 
       //validate zip/postal code
       const isInt = parseInt(document.getElementById("postal-code").value);
-      const correctLength = document.getElementById("postal-code").value.length === parseInt("<%= locals.zipLength %>");
+      const correctLength = document.getElementById("postal-code").value.length === "<%= locals.zipPlaceHolder %>".length;
       if (!isInt || !correctLength) {
         return [false,"<%= __('Please enter a valid postal code for your country') %>"];
       }
@@ -815,7 +815,7 @@
   const validateSymptoms = () => {
     var hasSymptom = radioSet(document.getElementsByClassName("symptom"));
     if (hasSymptom) {
-      const validDate = Date.parse(document.getElementById("symptom-start"));
+      const validDate = Date.parse(document.getElementById("symptom-start").value);
       if (!validDate) {
         return [false,"<%= __('Please add a start date for your symptoms') %>"];
       }
@@ -895,6 +895,7 @@
    toast.classList.add("w-5/6");
    toast.classList.add("md:w-full");
    toast.classList.add("max-w-sm");
+   toast.id = toast;
    var input = document.createElement("input");
    input.classList.add("hidden");
    input.type = "checkbox";
@@ -919,6 +920,10 @@
    toast.appendChild(label);
    toast.onclick = () => {
     document.getElementById("footertoast").checked = "checked";
+    setTimeout(() => {
+      const toast = document.getElementById("toast");
+      toast.parentElement.removeChild(toast);
+    }, 1000)
    }
    document.getElementsByTagName('body')[0].appendChild(toast);
  }

From 891c3fd4876f6cf10ad0c1af80a1b0ae7649a1f5 Mon Sep 17 00:00:00 2001
From: Amrit Nagi <amrit@astrava.solutions>
Date: Tue, 31 Mar 2020 22:20:31 +0100
Subject: [PATCH 15/31] Fixes and cosmetic tweaks

---
 app/views/pages/report.ejs | 53 ++++++++++----------------------------
 1 file changed, 13 insertions(+), 40 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 26d026a5..0626bec0 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -281,23 +281,23 @@
       </div>
       
       <div class="flex text-xs content-center text-center">
-        <div class="w-1/5 breadcrumb">
+        <div class="w-1/5">
           <%= __('Demography and geography') %>
         </div>
         
-        <div class="w-1/5 breadcrumb">
+        <div class="w-1/5">
           <%= __('Testing & Isolation') %>
         </div>
         
-        <div class="w-1/5 breadcrumb">
+        <div class="w-1/5">
           <%= __('Symptoms') %>
         </div>
         
-        <div class="w-1/5 breadcrumb">
+        <div class="w-1/5">
           <%= __('Health') %>
         </div>	
 
-        <div class="w-1/5 breadcrumb">
+        <div class="w-1/5">
           <%= __('Submit & Share') %>
         </div>		
 
@@ -346,7 +346,7 @@
       <% } %>
     </label>
     <input class="appearance-none border rounded py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required type="text" pattern="<%= locals.zipPattern %>" name="postal-code" id="postal-code" placeholder="<%= locals.zipPlaceHolder %>" value="<%= postalCode %>">
-    <ul class="mt-4 nav-btn-container">
+    <ul class="mt-8 nav-btn-container">
       <li>
         <input class="inverse next-btn" type="button" onclick="nextPage(validateDemographicsAndGeography)" value="<%= __('Next') %>">
       </li>
@@ -424,7 +424,7 @@
         <label for="isolation-due-to-covid-19"><%= __("In isolation due to COVID-19 infection") %></label>
       </p>
       </fieldset>
-      <ul class="mt-4 nav-btn-container">
+      <ul class="mt-8 nav-btn-container">
         <li>
           <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
           <input class="inverse next-btn" type="button" onclick="nextPage(validateTestingAndIsolation)" value="<%= __('Next') %>">
@@ -529,7 +529,7 @@
         id="symptom-start"
         value="<%= symptomStart %>">
     </div>
-    <ul class="mt-4 nav-btn-container">
+    <ul class="mt-8 nav-btn-container">
       <li>
         <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
         <input class="inverse next-btn" type="button" onclick="nextPage(validateSymptoms)" value="<%= __('Next') %>">
@@ -554,33 +554,6 @@
     </p>
     </fieldset>
 
-    <fieldset>
-    <legend><%= __('I am currently:')%></legend>
-    <p class="mb-2">
-      <input required type="radio" id="not-in-isolation" name="isolation-status" value="not-in-isolation" <%= isolationStatus === 'NOT_IN_ISOLATION' ? 'checked' : '' %>>
-      <label for="not-in-isolation"><%= __("Not in isolation") %></label>
-    </p>
-    <p class="mb-2">
-      <input required type="radio" id="isolation-due-to-travel" name="isolation-status" value="isolation-due-to-travel" <%= isolationStatus === 'ISOLATION_DUE_TO_TRAVEL' ? 'checked' : '' %>>
-      <label for="isolation-due-to-travel"><%= __("In isolation due to a recent international travel") %></label>
-    </p>
-    <p class="mb-2">
-      <input required type="radio" id="isolation-due-to-contact" name="isolation-status" value="isolation-due-to-contact" <%= isolationStatus === 'ISOLATION_DUE_TO_CONTACT' ? 'checked' : '' %>>
-      <label for="isolation-due-to-contact"><%= __("In isolation due to contact with an individual who has been exposed to the coronavirus.") %></label>
-    </p>
-    <p class="mb-2">
-      <input required type="radio" id="isolation-due-to-government" name="isolation-status" value="isolation-due-to-government" <%= isolationStatus === 'ISOLATION_DUE_TO_GOVERNMENT_ORDERS' ? 'checked' : '' %>>
-      <label for="isolation-due-to-government"><%= __("In isolation due to orders from the government") %></label>
-    </p>
-    <p class="mb-2">
-      <input required type="radio" id="isolation-due-to-covid-19" name="isolation-status" value="isolation-due-to-covid-19" <%= isolationStatus === 'ISOLATION_DUE_TO_COVID_19' ? 'checked' : '' %>>
-      <label for="isolation-due-to-covid-19"><%= __("In isolation due to COVID-19 infection") %></label>
-    </p>
-    <p>
-      <input required type="radio" id="voluntary-isolation" name="isolation-status" value="voluntary-isolation" <%= isolationStatus === 'VOLUNTARY_ISOLATION' ? 'checked' : '' %>>
-      <label for="voluntary-isolation"><%= __("In voluntary isolation to avoid potentially spreading or catching COVID-19") %></label>
-    </p>
-    </fieldset>
 
     <fieldset>
     <legend><%= __('Cigarette smoking habits:') %></legend>
@@ -611,7 +584,7 @@
       id="body-temperature"
       value="<%= bodyTemperature %>"
     >
-    <ul class="mt-4 nav-btn-container" >
+    <ul class="mt-8 nav-btn-container" >
       <li>
         <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
         <input class="inverse next-btn" type="button" onclick="nextPage(validateHealth)" value="<%= __('Next') %>">
@@ -646,11 +619,11 @@
       </label>
     </p>
 
-    <ul class="mt-4 nav-btn-container">
+    <ul class="mt-8 nav-btn-container">
       <li>
         <input type="hidden" name="passcode" value="<%= passcode %>" />
         <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
-        <input class="inverse next-btn" type="submit" value="<%= __('Submit report') %>">
+        <input class="inverse next-btn custom-nav-link rounded-full text-base text-white mt-2 font-medium px-5 py-3" type="submit" value="<%= __('Submit report') %>">
       </li>
     </ul>
   </div>
@@ -800,7 +773,7 @@
     //validate tested
     var hasTested = radioSet(document.getElementsByName("been-tested"));
     if (!hasTested) {
-      return [false,"<%= __('Please select whether you have been tested for COVID-19?') %>"];
+      return [false,"<%= __('Please select whether you have been tested for COVID-19') %>"];
     }
 
     //validate isolation
@@ -895,7 +868,7 @@
    toast.classList.add("w-5/6");
    toast.classList.add("md:w-full");
    toast.classList.add("max-w-sm");
-   toast.id = toast;
+   toast.id = "toast";
    var input = document.createElement("input");
    input.classList.add("hidden");
    input.type = "checkbox";

From 47b43865603ae211d3add987ab97ddf9af48c040 Mon Sep 17 00:00:00 2001
From: Amrit Nagi <amrit@astrava.solutions>
Date: Tue, 31 Mar 2020 22:24:18 +0100
Subject: [PATCH 16/31] Updated button on confirm-profile

---
 app/views/pages/confirm-profile.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/pages/confirm-profile.ejs b/app/views/pages/confirm-profile.ejs
index 93b89204..61e80883 100644
--- a/app/views/pages/confirm-profile.ejs
+++ b/app/views/pages/confirm-profile.ejs
@@ -70,7 +70,7 @@
     <% } %>
 
     <p class="my-4">
-      <input class="inverse button" type="submit" value="<%= __('Proceed') %>" />
+      <input class="inverse custom-nav-link rounded-full text-base text-white mt-2 font-medium px-5 py-3" type="submit" value="<%= __('Proceed') %>" />
     </p>
   </form>
 </section>

From b07aa38e1aea5bed134b8d27cfcbfe1cb6c03dd2 Mon Sep 17 00:00:00 2001
From: Amrit Nagi <amrit@astrava.solutions>
Date: Tue, 31 Mar 2020 22:32:43 +0100
Subject: [PATCH 17/31] Added indicator for required fields

---
 app/views/pages/report.ejs | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 0626bec0..ff83989a 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -314,7 +314,7 @@
     </div>
 
 
-    <label class="text-h4" for="Age"><%= __("Your age") %></label>
+    <label class="text-h4" for="Age"><%= __("Your age") %> <span class="text-cvs-green-dark">*</span></label>
     <select class="appearance-none rounded focus:outline-none focus:shadow-outline" required name="age" id="Age">
       <option value="" disabled selected><%= __("Choose your age") %></option>
       <% for(var i=0; i<100; i+=10) {
@@ -325,7 +325,7 @@
     </select>
 
     <fieldset>
-    <legend><%= __("Biological gender") %></legend>
+    <legend><%= __("Biological gender") %> <span class="text-cvs-green-dark">*</span></legend>
     <p class="mb-2">
       <input required type="radio" id="gender-female" name="gender" value="female" <%= sex === 'FEMALE' ? 'checked' : '' %>>
       <label for="gender-female"><%= __("Female") %></label>
@@ -344,6 +344,7 @@
       <% if (locals.zipGuide) { %>
         <span>- </span><a class="text-cvs-red font-bold hover:underline" href="<%= __(`https://www.whatismyzip.com`) %>" target="_blank"><%= __('What is my Zip code?') %></a>
       <% } %>
+      <span class="text-cvs-green-dark">*</span>
     </label>
     <input class="appearance-none border rounded py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required type="text" pattern="<%= locals.zipPattern %>" name="postal-code" id="postal-code" placeholder="<%= locals.zipPlaceHolder %>" value="<%= postalCode %>">
     <ul class="mt-8 nav-btn-container">
@@ -360,7 +361,7 @@
     </div>
 
     <fieldset>
-    <legend><%= __("Have you been in close contact with someone who was tested positive for COVID-19?") %></legend>
+    <legend><%= __("Have you been in close contact with someone who was tested positive for COVID-19?") %> <span class="text-cvs-green-dark">*</span></legend>
 
     <p>
       <input required type="radio" id="been-in-contact-with-yes" name="been-in-contact-with" value="yes" <%= hasBeenInContactWithInfected ? 'checked' : '' %>>
@@ -373,7 +374,7 @@
 
 
     <fieldset>
-    <legend><%= __('Have you been tested for COVID-19?')%></legend>
+    <legend><%= __('Have you been tested for COVID-19?')%> <span class="text-cvs-green-dark">*</span></legend>
     <p>
         <input required type="radio" id="been-tested-yes" name="been-tested" value="yes" onclick="changeTestResultDisplay(true)" <%= hasBeenTested ? 'checked' : '' %>>
         <label class="mr-4" for="been-tested-yes"><%= __('Yes')%></label>
@@ -385,7 +386,7 @@
 
     <div id="test-result-question" style="display: none;">
       <fieldset>
-      <legend><%= __('What was the result?')%></legend>
+      <legend><%= __('What was the result?')%> <span class="text-cvs-green-dark">*</span></legend>
 
       <p>
         <input type="radio" id="test-response-positive" name="test-response" value="positive" <%= testResult === 'POSITIVE' ? 'checked' : '' %>>
@@ -402,7 +403,7 @@
 
 
     <fieldset>
-      <legend><%= __('I am currently:')%></legend>
+      <legend><%= __('I am currently:')%> <span class="text-cvs-green-dark">*</span></legend>
       <p class="mb-2">
         <input required type="radio" id="not-in-isolation" name="isolation-status" value="not-in-isolation" <%= isolationStatus === 'NOT_IN_ISOLATION' ? 'checked' : '' %>>
         <label for="not-in-isolation"><%= __("Not in isolation") %></label>
@@ -521,7 +522,7 @@
     </fieldset>
 
     <div id="symptom-start-question" style="display: none;">
-      <label for="symptom-start"><%= __('When did the symptoms start?')%></label>
+      <label for="symptom-start"><%= __('When did the symptoms start?')%> <span class="text-cvs-green-dark">*</span></label>
       <input
         class="appearance-none border rounded py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
         type="date"
@@ -543,7 +544,7 @@
       <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Health") %></h3>
     </div>
     <fieldset>
-    <legend class="mb-0"><%= __('Have you been diagnosed with any of the following conditions?')%></legend>
+    <legend class="mb-0"><%= __('Have you been diagnosed with any of the following conditions?')%> <span class="text-cvs-green-dark">*</span></legend>
     <p class="mb-4"><%= __('Diabetes mellitus, Hypertension, Ischemic heart disease, Asthma, Chronic lung disease, Chronic kidney disease') %></p>
     <p>
         <input required type="radio" id="diagnosed-other-conditions-yes" name="diagnosed-other-conditions" value="yes" <%= diagnosedWithOtherConditions ? 'checked' : '' %>>
@@ -556,7 +557,7 @@
 
 
     <fieldset>
-    <legend><%= __('Cigarette smoking habits:') %></legend>
+    <legend><%= __('Cigarette smoking habits:') %> <span class="text-cvs-green-dark">*</span></legend>
     <p class="mb-2">
       <input required type="radio" id="currently-smoking" name="smoking-habits" value="currently-smoking" <%= smokingHabit === 'CURRENTLY' ? 'checked' : '' %>>
       <label for="currently-smoking"><%= __("I currently smoke") %></label>

From 34b7f03b3990c21332b2189d49b8de92cc4e572a Mon Sep 17 00:00:00 2001
From: Amrit Nagi <amrit@astrava.solutions>
Date: Tue, 31 Mar 2020 22:39:27 +0100
Subject: [PATCH 18/31] Updated breadcrumb border

---
 app/views/pages/report.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index ff83989a..4300e597 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -207,7 +207,7 @@
     <% } %>
 
    
-    <div class="max-w-4xl mx-auto my-4 border-b-2 pb-4">	
+    <div class="max-w-4xl mx-auto my-4 border-b border-cvs-green-dark pb-8">	
       <div class="flex pb-3">
 
         <div class="w-auto sm:w-8 md:w-12"></div>

From fc2289f9c4f1cea717c4047d3c5e502b8c5954b9 Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Wed, 1 Apr 2020 12:25:12 -0400
Subject: [PATCH 19/31] remove symtom/startdate validation

---
 app/views/pages/report.ejs | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 4300e597..5c8dc770 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -787,13 +787,6 @@
   }
 
   const validateSymptoms = () => {
-    var hasSymptom = radioSet(document.getElementsByClassName("symptom"));
-    if (hasSymptom) {
-      const validDate = Date.parse(document.getElementById("symptom-start").value);
-      if (!validDate) {
-        return [false,"<%= __('Please add a start date for your symptoms') %>"];
-      }
-    }
     return [true, undefined];
   }
 

From 009b84cd497e236ae2bb5860f2be100e46baa171 Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Wed, 1 Apr 2020 12:32:31 -0400
Subject: [PATCH 20/31] remove isInt validation for zip codes to accept codes
 with letters

---
 app/views/pages/report.ejs | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 5c8dc770..9e6a6703 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -755,9 +755,8 @@
       }
 
       //validate zip/postal code
-      const isInt = parseInt(document.getElementById("postal-code").value);
       const correctLength = document.getElementById("postal-code").value.length === "<%= locals.zipPlaceHolder %>".length;
-      if (!isInt || !correctLength) {
+      if (!correctLength) {
         return [false,"<%= __('Please enter a valid postal code for your country') %>"];
       }
 

From 8cd3f16613e159f1053be4783af95a4cd3c37af1 Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Wed, 1 Apr 2020 12:34:54 -0400
Subject: [PATCH 21/31] rename radioSet function to isRadioButtonSet

---
 app/views/pages/report.ejs | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 9e6a6703..dcf16242 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -749,7 +749,7 @@
       }
 
       //validate sex
-      var hasGender = radioSet(document.getElementsByName("gender"));
+      var hasGender = isRadioButtonSet(document.getElementsByName("gender"));
       if (!hasGender) {
         return [false,"<%= __('Please select a Biological gender/Sex') %>"];
       }
@@ -765,19 +765,19 @@
 
   const validateTestingAndIsolation = () => {
     //validate in close contact
-    var hasContact = radioSet(document.getElementsByName("been-in-contact-with"));
+    var hasContact = isRadioButtonSet(document.getElementsByName("been-in-contact-with"));
     if (!hasContact) {
       return [false,"<%= __('Please select whether you have been in close contact with someone who tested positive for COVID-19') %>"];
     }
 
     //validate tested
-    var hasTested = radioSet(document.getElementsByName("been-tested"));
+    var hasTested = isRadioButtonSet(document.getElementsByName("been-tested"));
     if (!hasTested) {
       return [false,"<%= __('Please select whether you have been tested for COVID-19') %>"];
     }
 
     //validate isolation
-    var hasIsolation = radioSet(document.getElementsByName("isolation-status"));
+    var hasIsolation = isRadioButtonSet(document.getElementsByName("isolation-status"));
     if (!hasIsolation) {
       return [false,"<%= __('Please select your isolation status') %>"];
     }
@@ -791,13 +791,13 @@
 
   const validateHealth = () => {
     //health condition
-    const hasHealthConditon = radioSet(document.getElementsByName("diagnosed-other-conditions"));
+    const hasHealthConditon = isRadioButtonSet(document.getElementsByName("diagnosed-other-conditions"));
     if (!hasHealthConditon) {
       return [false,"<%= __('Please select if you have a  preexisting health condition') %>"];
     }
 
     //smoking
-    const hasSmoking = radioSet(document.getElementsByName("smoking-habits"));
+    const hasSmoking = isRadioButtonSet(document.getElementsByName("smoking-habits"));
     if (!hasSmoking) {
       return [false,"<%= __('Please select your smoking habits') %>"];
     }
@@ -812,7 +812,8 @@
     validateHealth
   ];
 
-  function radioSet(collection) {
+//accepts a collection of html elements and returns true if any of the elements is checked
+  function isRadioButtonSet(collection) {
     var re = false;
     for (var i = 0; i < collection.length; i++) {
       if (collection[i].checked) {

From 6266d7be203fe2e6391a0131d4c61e3c7325da3e Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Wed, 1 Apr 2020 12:38:39 -0400
Subject: [PATCH 22/31] increased breadcrumb text size

---
 app/views/pages/report.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index dcf16242..539892f6 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -280,7 +280,7 @@
 
       </div>
       
-      <div class="flex text-xs content-center text-center">
+      <div class="flex text-sm content-center text-center">
         <div class="w-1/5">
           <%= __('Demography and geography') %>
         </div>

From 196cef324a35493d8a39fefdfaa20c3f18352780 Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Wed, 1 Apr 2020 12:42:28 -0400
Subject: [PATCH 23/31] moved next and submit buttons ahead of back buttons in
 the source

---
 app/views/pages/report.ejs | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 539892f6..ee0316a6 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -427,8 +427,8 @@
       </fieldset>
       <ul class="mt-8 nav-btn-container">
         <li>
-          <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
           <input class="inverse next-btn" type="button" onclick="nextPage(validateTestingAndIsolation)" value="<%= __('Next') %>">
+          <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
         </li>
       </ul>
   </div>
@@ -531,9 +531,9 @@
         value="<%= symptomStart %>">
     </div>
     <ul class="mt-8 nav-btn-container">
-      <li>
-        <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
+      <li> 
         <input class="inverse next-btn" type="button" onclick="nextPage(validateSymptoms)" value="<%= __('Next') %>">
+        <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
       </li>
     </ul> 
   </div>
@@ -587,8 +587,8 @@
     >
     <ul class="mt-8 nav-btn-container" >
       <li>
-        <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
         <input class="inverse next-btn" type="button" onclick="nextPage(validateHealth)" value="<%= __('Next') %>">
+        <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
       </li>
     </ul> 
   </div>
@@ -622,9 +622,9 @@
 
     <ul class="mt-8 nav-btn-container">
       <li>
+        <input class="inverse next-btn custom-nav-link rounded-full text-base text-white mt-2 font-medium px-5 py-3" type="submit" value="<%= __('Submit report') %>">
         <input type="hidden" name="passcode" value="<%= passcode %>" />
         <input class="inverse" type="button" onclick="previousPage()" value="<%= __('Back') %>">
-        <input class="inverse next-btn custom-nav-link rounded-full text-base text-white mt-2 font-medium px-5 py-3" type="submit" value="<%= __('Submit report') %>">
       </li>
     </ul>
   </div>

From e1320ddde56b7952fbe5b1e06a2ff20e63786981 Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Wed, 1 Apr 2020 13:12:50 -0400
Subject: [PATCH 24/31] replace const/let, arrow functions, and template
 literals

---
 app/views/pages/report.ejs | 48 +++++++++++++++++++-------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index ee0316a6..3ebebc88 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -741,7 +741,7 @@
   /* Page validation functions. 
   If validation fails and messages to be displayed should be dispatched in the validation function.
   These aren't done */
-  const validateDemographicsAndGeography = () => {
+  var validateDemographicsAndGeography = function() {
       //validate age
       var hasAge = document.getElementById("Age").value != "";
       if (!hasAge) {
@@ -755,7 +755,7 @@
       }
 
       //validate zip/postal code
-      const correctLength = document.getElementById("postal-code").value.length === "<%= locals.zipPlaceHolder %>".length;
+      var correctLength = document.getElementById("postal-code").value.length === "<%= locals.zipPlaceHolder %>".length;
       if (!correctLength) {
         return [false,"<%= __('Please enter a valid postal code for your country') %>"];
       }
@@ -763,7 +763,7 @@
       return [true,undefined];
   }
 
-  const validateTestingAndIsolation = () => {
+  var validateTestingAndIsolation = function() {
     //validate in close contact
     var hasContact = isRadioButtonSet(document.getElementsByName("been-in-contact-with"));
     if (!hasContact) {
@@ -785,19 +785,19 @@
     return [true, undefined];
   }
 
-  const validateSymptoms = () => {
+  var validateSymptoms = function() {
     return [true, undefined];
   }
 
-  const validateHealth = () => {
+  var validateHealth = function() {
     //health condition
-    const hasHealthConditon = isRadioButtonSet(document.getElementsByName("diagnosed-other-conditions"));
+    var hasHealthConditon = isRadioButtonSet(document.getElementsByName("diagnosed-other-conditions"));
     if (!hasHealthConditon) {
       return [false,"<%= __('Please select if you have a  preexisting health condition') %>"];
     }
 
     //smoking
-    const hasSmoking = isRadioButtonSet(document.getElementsByName("smoking-habits"));
+    var hasSmoking = isRadioButtonSet(document.getElementsByName("smoking-habits"));
     if (!hasSmoking) {
       return [false,"<%= __('Please select your smoking habits') %>"];
     }
@@ -805,7 +805,7 @@
     return [true,undefined];
   }
 
-  const validationFunctions = [
+  var validationFunctions = [
     validateDemographicsAndGeography,
     validateTestingAndIsolation,
     validateSymptoms,
@@ -827,7 +827,7 @@
 
 <script>
   /* Pagination */
- const numPages = 5;
+ var numPages = 5;
  var currentPage = 1;
 
  /*increase page number by 1 and rerender the form. 
@@ -870,7 +870,7 @@
    toast.appendChild(input);
    var label = document.createElement("label");
    label.for = "footertoast";
-   label.title = `<%= __("Close") %>`;
+   label.title = '<%= __("Close") %>';
    label.classList.add("close");
    label.classList.add("cursor-pointer");
    label.classList.add("flex");
@@ -883,12 +883,12 @@
    label.classList.add("rounded");
    label.classList.add("shadow-lg");
    label.classList.add("text-white");
-   label.innerHTML = msg + `<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path></svg>`;
+   label.innerHTML = msg + '<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path></svg>';
    toast.appendChild(label);
-   toast.onclick = () => {
+   toast.onclick = function() {
     document.getElementById("footertoast").checked = "checked";
-    setTimeout(() => {
-      const toast = document.getElementById("toast");
+    setTimeout(function() {
+      var toast = document.getElementById("toast");
       toast.parentElement.removeChild(toast);
     }, 1000)
    }
@@ -925,21 +925,21 @@
       span.classList.add("text-gray-800");
       span.classList.add("text-center");
       span.classList.add("w-full");
-      span.innerText = `${i}`;
+      span.innerText = i;
 
       if (current) {
         breadcontent.classList.add("border-cvs-green-dark");
       } 
 
-      breadcrumb.onclick = () => goToPage(i);
+      breadcrumb.onclick = function(){goToPage(i)};
       if (validationFunctions[i-1] && !validationFunctions[i-1]()[0]) {
-        breadcrumb.onclick = () => {};
+        breadcrumb.onclick = function(){};
       } else if (i-2>-1 && !validationFunctions[i-2]()[0]) {
         //pages that are valid and the previous page is invalid 
         //(for pages that don't have required fields)
-        breadcrumb.onclick = () => {};
+        breadcrumb.onclick = function(){};
       } else if (i-3>-1 && !validationFunctions[i-3]()[0]) {
-        breadcrumb.onclick = () => {};
+        breadcrumb.onclick = function(){};
       }
 
       breadcontent.appendChild(span);
@@ -958,15 +958,15 @@
       breadcontent.classList.add("text-white");
       breadcontent.classList.add("flex");
       breadcontent.classList.add("items-center");
-      breadcontent.innerHTML = `<svg class="mx-auto h-8 w-8 text-white"  fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg>`;
+      breadcontent.innerHTML = '<svg class="mx-auto h-8 w-8 text-white"  fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg>';
       breadcrumb.appendChild(breadcontent);
-      breadcrumb.onclick = () => goToPage(i);
+      breadcrumb.onclick = function() {goToPage(i)};
  }
 
  /*Applies updates to a progress bar given it's id number (i). 
  If it can't find a progress bar with the id it does nothing*/
  function updateProgressBar(i, percent) {
-  var bar = document.getElementById(`progress-bar-${i}`);
+  var bar = document.getElementById('progress-bar-'+i);
   if (bar) {
     bar.style.width = percent;
   }
@@ -974,8 +974,8 @@
 
  function updatePaginate() {
   for (var i = 1; i <= numPages; i++) {
-    var page = document.getElementById(`page-${i}`);
-    var breadcrumb = document.getElementById(`breadcrumb-${i}`);
+    var page = document.getElementById('page-'+i);
+    var breadcrumb = document.getElementById('breadcrumb-'+i);
     breadcrumb.textContent = '';
 
     if (i === currentPage) {

From 880638aad12555f03b9f83b289673b091089492c Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Wed, 1 Apr 2020 13:48:25 -0400
Subject: [PATCH 25/31] accesible breadcrumbs

---
 app/views/pages/report.ejs | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 3ebebc88..ce43dec2 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -38,6 +38,9 @@
 <style>
   .breadcrumb {
     cursor: pointer;
+    border:none;
+    margin:0px; 
+    padding:0px;
   }
 
   .page-container {
@@ -212,13 +215,14 @@
 
         <div class="w-auto sm:w-8 md:w-12"></div>
     
-        <div class="flex-1 breadcrumb" id="breadcrumb-1" onclick="goToPage(1)">
+        <button class="flex-1 breadcrumb" id="breadcrumb-1" onclick="goToPage(1)">
+          <span class="sr-only"><%= __('Go to step 1')%> <%= __('Demography & geography') %></span>
           <div class="w-10 h-10 bg-cvs-green-dark mx-auto rounded-full text-lg text-white flex items-center">
             <svg class="mx-auto h-8 w-8 text-white"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
             </svg>
           </div>
-        </div>
+        </button>
     
     
         <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex" >
@@ -228,13 +232,14 @@
         </div>
       
         
-        <div class="flex-1 breadcrumb" id="breadcrumb-2" onclick="goToPage(2)">
+        <button class="flex-1 breadcrumb" id="breadcrumb-2" onclick="goToPage(2)">
+          <span class="sr-only"><%= __('Go to step 2')%> <%= __('Testing & Isolation') %></span>
           <div class="w-10 h-10 bg-cvs-green-dark mx-auto rounded-full text-lg text-white flex items-center">
             <svg class="mx-auto h-8 w-8 text-white"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
             </svg>
           </div>
-        </div>
+        </button>
       
         <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex">
           <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
@@ -242,11 +247,12 @@
           </div>
         </div>
       
-        <div class="flex-1 breadcrumb" id="breadcrumb-3" onclick="goToPage(3)">
+        <button class="flex-1 breadcrumb" id="breadcrumb-3" onclick="goToPage(3)">
+          <span class="sr-only"><%= __('Go to step 3')%> <%= __('Symptoms') %></span>
           <div class="w-10 h-10 bg-cvs-green-light border-2 border-cvs-green-dark mx-auto rounded-full text-lg flex items-center">
             <span class="text-gray-800 text-center w-full">3</span>
           </div>
-        </div>
+        </button>
       
       
         <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex">
@@ -256,11 +262,12 @@
         </div>
     
     
-        <div class="flex-1 breadcrumb" id="breadcrumb-4" onclick="goToPage(4)">
+        <button class="flex-1 breadcrumb" id="breadcrumb-4" onclick="goToPage(4)">
+          <span class="sr-only"><%= __('Go to step 4')%> <%= __('Health') %></span>
           <div class="w-10 h-10 bg-cvs-green-light border-2 border-cvs-green-dark mx-auto rounded-full text-lg flex items-center">
             <span class="text-gray-800 text-center w-full">4</span>
           </div>
-        </div>
+        </button>
 
         <div class="w-8 sm:w-12 md:w-24 align-center items-center align-middle content-center flex">
           <div class="w-full bg-gray-500 rounded items-center align-middle align-center flex-1">
@@ -268,11 +275,12 @@
           </div>
         </div>
       
-        <div class="flex-1 breadcrumb" id="breadcrumb-5" onclick="goToPage(5)">
+        <button class="flex-1 breadcrumb" id="breadcrumb-5" onclick="goToPage(5)">
+          <span class="sr-only"><%= __('Go to step 5')%> <%= __('Submit & Share') %></span>
           <div class="w-10 h-10 bg-cvs-green-light border-2 border-cvs-green-dark mx-auto rounded-full text-lg flex items-center">
             <span class="text-gray-800 text-center w-full">5</span>
           </div>
-        </div>
+        </button>
       
         <div class="w-auto sm:w-8 md:w-12"></div>
 
@@ -282,7 +290,7 @@
       
       <div class="flex text-sm content-center text-center">
         <div class="w-1/5">
-          <%= __('Demography and geography') %>
+          <%= __('Demography & geography') %>
         </div>
         
         <div class="w-1/5">

From 39c8090c12ddda85ac54501aa01eb34527fc375a Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Wed, 1 Apr 2020 13:52:36 -0400
Subject: [PATCH 26/31] removed green * for required fields

---
 app/views/pages/report.ejs | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index ce43dec2..4fb29df0 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -322,7 +322,7 @@
     </div>
 
 
-    <label class="text-h4" for="Age"><%= __("Your age") %> <span class="text-cvs-green-dark">*</span></label>
+    <label class="text-h4" for="Age"><%= __("Your age") %> </label>
     <select class="appearance-none rounded focus:outline-none focus:shadow-outline" required name="age" id="Age">
       <option value="" disabled selected><%= __("Choose your age") %></option>
       <% for(var i=0; i<100; i+=10) {
@@ -333,7 +333,7 @@
     </select>
 
     <fieldset>
-    <legend><%= __("Biological gender") %> <span class="text-cvs-green-dark">*</span></legend>
+    <legend><%= __("Biological gender") %> </legend>
     <p class="mb-2">
       <input required type="radio" id="gender-female" name="gender" value="female" <%= sex === 'FEMALE' ? 'checked' : '' %>>
       <label for="gender-female"><%= __("Female") %></label>
@@ -352,7 +352,7 @@
       <% if (locals.zipGuide) { %>
         <span>- </span><a class="text-cvs-red font-bold hover:underline" href="<%= __(`https://www.whatismyzip.com`) %>" target="_blank"><%= __('What is my Zip code?') %></a>
       <% } %>
-      <span class="text-cvs-green-dark">*</span>
+      
     </label>
     <input class="appearance-none border rounded py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required type="text" pattern="<%= locals.zipPattern %>" name="postal-code" id="postal-code" placeholder="<%= locals.zipPlaceHolder %>" value="<%= postalCode %>">
     <ul class="mt-8 nav-btn-container">
@@ -369,7 +369,7 @@
     </div>
 
     <fieldset>
-    <legend><%= __("Have you been in close contact with someone who was tested positive for COVID-19?") %> <span class="text-cvs-green-dark">*</span></legend>
+    <legend><%= __("Have you been in close contact with someone who was tested positive for COVID-19?") %> </legend>
 
     <p>
       <input required type="radio" id="been-in-contact-with-yes" name="been-in-contact-with" value="yes" <%= hasBeenInContactWithInfected ? 'checked' : '' %>>
@@ -382,7 +382,7 @@
 
 
     <fieldset>
-    <legend><%= __('Have you been tested for COVID-19?')%> <span class="text-cvs-green-dark">*</span></legend>
+    <legend><%= __('Have you been tested for COVID-19?')%> </legend>
     <p>
         <input required type="radio" id="been-tested-yes" name="been-tested" value="yes" onclick="changeTestResultDisplay(true)" <%= hasBeenTested ? 'checked' : '' %>>
         <label class="mr-4" for="been-tested-yes"><%= __('Yes')%></label>
@@ -394,7 +394,7 @@
 
     <div id="test-result-question" style="display: none;">
       <fieldset>
-      <legend><%= __('What was the result?')%> <span class="text-cvs-green-dark">*</span></legend>
+      <legend><%= __('What was the result?')%> </legend>
 
       <p>
         <input type="radio" id="test-response-positive" name="test-response" value="positive" <%= testResult === 'POSITIVE' ? 'checked' : '' %>>
@@ -411,7 +411,7 @@
 
 
     <fieldset>
-      <legend><%= __('I am currently:')%> <span class="text-cvs-green-dark">*</span></legend>
+      <legend><%= __('I am currently:')%> </legend>
       <p class="mb-2">
         <input required type="radio" id="not-in-isolation" name="isolation-status" value="not-in-isolation" <%= isolationStatus === 'NOT_IN_ISOLATION' ? 'checked' : '' %>>
         <label for="not-in-isolation"><%= __("Not in isolation") %></label>
@@ -530,7 +530,7 @@
     </fieldset>
 
     <div id="symptom-start-question" style="display: none;">
-      <label for="symptom-start"><%= __('When did the symptoms start?')%> <span class="text-cvs-green-dark">*</span></label>
+      <label for="symptom-start"><%= __('When did the symptoms start?')%> </label>
       <input
         class="appearance-none border rounded py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
         type="date"
@@ -552,7 +552,7 @@
       <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Health") %></h3>
     </div>
     <fieldset>
-    <legend class="mb-0"><%= __('Have you been diagnosed with any of the following conditions?')%> <span class="text-cvs-green-dark">*</span></legend>
+    <legend class="mb-0"><%= __('Have you been diagnosed with any of the following conditions?')%> </legend>
     <p class="mb-4"><%= __('Diabetes mellitus, Hypertension, Ischemic heart disease, Asthma, Chronic lung disease, Chronic kidney disease') %></p>
     <p>
         <input required type="radio" id="diagnosed-other-conditions-yes" name="diagnosed-other-conditions" value="yes" <%= diagnosedWithOtherConditions ? 'checked' : '' %>>
@@ -565,7 +565,7 @@
 
 
     <fieldset>
-    <legend><%= __('Cigarette smoking habits:') %> <span class="text-cvs-green-dark">*</span></legend>
+    <legend><%= __('Cigarette smoking habits:') %> </legend>
     <p class="mb-2">
       <input required type="radio" id="currently-smoking" name="smoking-habits" value="currently-smoking" <%= smokingHabit === 'CURRENTLY' ? 'checked' : '' %>>
       <label for="currently-smoking"><%= __("I currently smoke") %></label>

From e13974be5d7b45f64c8b60807b50082421bf17f2 Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Wed, 1 Apr 2020 14:09:18 -0400
Subject: [PATCH 27/31] convert toastAlert to one permanent element to be
 modified each time

---
 app/views/pages/report.ejs | 54 +++++++++++++-------------------------
 1 file changed, 18 insertions(+), 36 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 4fb29df0..402e5f75 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -639,6 +639,13 @@
   </form>
 </section>
 
+<div class="alert-toast fixed bottom-0 right-0 m-8 w-5/6 md:w-full max-w-sm hidden" id="toast">
+  <input class="hidden" type="checkbox" id="footertoast">
+  <label for="footertoast" title='<%= __("Close") %>' class="close cursor-pointer flex items-start justify-between w-full p-2 bg-cvs-red  h-24 rounded shadow-lg text-white">
+  <span id="toastmessage"></span>
+  <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path></svg>
+ </div>
+
 <section class="w-full self-center text-center m-8">
   <p class="pb-2 text-cvs-red text-lg md:text-xl lg:text-2xl font-bold"><%= __(`Contribute and share {{ hostname }} on`, { hostname: baseUrl }) %></p>
   <%- include('partials/share', { amount: formatNumber(aggregated.numberOfReports) }) -%>
@@ -858,49 +865,24 @@
     updatePaginate();
    }
  }
+
+ 
  
  //creates an alert for the user displaying given msg 
  function toastAlert(msg) {
-   var toast = document.createElement("div");
-   toast.classList.add("alert-toast");
-   toast.classList.add("fixed");
-   toast.classList.add("bottom-0")
-   toast.classList.add("right-0");
-   toast.classList.add("m-8");
-   toast.classList.add("w-5/6");
-   toast.classList.add("md:w-full");
-   toast.classList.add("max-w-sm");
-   toast.id = "toast";
-   var input = document.createElement("input");
-   input.classList.add("hidden");
-   input.type = "checkbox";
-   input.id = "footertoast";
-   toast.appendChild(input);
-   var label = document.createElement("label");
-   label.for = "footertoast";
-   label.title = '<%= __("Close") %>';
-   label.classList.add("close");
-   label.classList.add("cursor-pointer");
-   label.classList.add("flex");
-   label.classList.add("items-start");
-   label.classList.add("justify-between");
-   label.classList.add("w-full");
-   label.classList.add("p-2");
-   label.classList.add("bg-cvs-red");
-   label.classList.add("h-24");
-   label.classList.add("rounded");
-   label.classList.add("shadow-lg");
-   label.classList.add("text-white");
-   label.innerHTML = msg + '<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path></svg>';
-   toast.appendChild(label);
+   var toastMessage = document.getElementById("toastmessage");
+   toastMessage.innerText = msg;
+
+   document.getElementById("footertoast").checked = false;
+
+   var toast = document.getElementById("toast");
+   toast.classList.remove("hidden");
    toast.onclick = function() {
     document.getElementById("footertoast").checked = "checked";
     setTimeout(function() {
-      var toast = document.getElementById("toast");
-      toast.parentElement.removeChild(toast);
-    }, 1000)
+      document.getElementById("toast").classList.add("hidden");
+    }, 1000);
    }
-   document.getElementsByTagName('body')[0].appendChild(toast);
  }
 
 

From 6205e6eed5f3cd3b7d8e45a293eb3159dc358640 Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Wed, 1 Apr 2020 14:47:07 -0400
Subject: [PATCH 28/31] fixed a translation string typo

---
 app/views/pages/report.ejs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 402e5f75..b9895a68 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -216,7 +216,7 @@
         <div class="w-auto sm:w-8 md:w-12"></div>
     
         <button class="flex-1 breadcrumb" id="breadcrumb-1" onclick="goToPage(1)">
-          <span class="sr-only"><%= __('Go to step 1')%> <%= __('Demography & geography') %></span>
+          <span class="sr-only"><%= __('Go to step 1')%> <%= __('Demography and geography') %></span>
           <div class="w-10 h-10 bg-cvs-green-dark mx-auto rounded-full text-lg text-white flex items-center">
             <svg class="mx-auto h-8 w-8 text-white"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
@@ -290,7 +290,7 @@
       
       <div class="flex text-sm content-center text-center">
         <div class="w-1/5">
-          <%= __('Demography & geography') %>
+          <%= __('Demography and geography') %>
         </div>
         
         <div class="w-1/5">

From a92b6d38773365c47cfee186ad172cc375d2b22c Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Thu, 2 Apr 2020 00:13:37 -0400
Subject: [PATCH 29/31] change Go to step 1-5 to Go to step with number moved
 to html

---
 app/views/pages/report.ejs | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index b9895a68..f4215c84 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -216,7 +216,7 @@
         <div class="w-auto sm:w-8 md:w-12"></div>
     
         <button class="flex-1 breadcrumb" id="breadcrumb-1" onclick="goToPage(1)">
-          <span class="sr-only"><%= __('Go to step 1')%> <%= __('Demography and geography') %></span>
+          <span class="sr-only"><%= __('Go to step')%> 1 <%= __('Demography and geography') %></span>
           <div class="w-10 h-10 bg-cvs-green-dark mx-auto rounded-full text-lg text-white flex items-center">
             <svg class="mx-auto h-8 w-8 text-white"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
@@ -233,7 +233,7 @@
       
         
         <button class="flex-1 breadcrumb" id="breadcrumb-2" onclick="goToPage(2)">
-          <span class="sr-only"><%= __('Go to step 2')%> <%= __('Testing & Isolation') %></span>
+          <span class="sr-only"><%= __('Go to step')%> 2 <%= __('Testing & Isolation') %></span>
           <div class="w-10 h-10 bg-cvs-green-dark mx-auto rounded-full text-lg text-white flex items-center">
             <svg class="mx-auto h-8 w-8 text-white"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
@@ -248,7 +248,7 @@
         </div>
       
         <button class="flex-1 breadcrumb" id="breadcrumb-3" onclick="goToPage(3)">
-          <span class="sr-only"><%= __('Go to step 3')%> <%= __('Symptoms') %></span>
+          <span class="sr-only"><%= __('Go to step')%> 3 <%= __('Symptoms') %></span>
           <div class="w-10 h-10 bg-cvs-green-light border-2 border-cvs-green-dark mx-auto rounded-full text-lg flex items-center">
             <span class="text-gray-800 text-center w-full">3</span>
           </div>
@@ -263,7 +263,7 @@
     
     
         <button class="flex-1 breadcrumb" id="breadcrumb-4" onclick="goToPage(4)">
-          <span class="sr-only"><%= __('Go to step 4')%> <%= __('Health') %></span>
+          <span class="sr-only"><%= __('Go to step')%> 4 <%= __('Health') %></span>
           <div class="w-10 h-10 bg-cvs-green-light border-2 border-cvs-green-dark mx-auto rounded-full text-lg flex items-center">
             <span class="text-gray-800 text-center w-full">4</span>
           </div>
@@ -276,7 +276,7 @@
         </div>
       
         <button class="flex-1 breadcrumb" id="breadcrumb-5" onclick="goToPage(5)">
-          <span class="sr-only"><%= __('Go to step 5')%> <%= __('Submit & Share') %></span>
+          <span class="sr-only"><%= __('Go to step')%> 5 <%= __('Submit & Share') %></span>
           <div class="w-10 h-10 bg-cvs-green-light border-2 border-cvs-green-dark mx-auto rounded-full text-lg flex items-center">
             <span class="text-gray-800 text-center w-full">5</span>
           </div>

From 6e2f0b6ccace9baa4bf6a7ac26bac0b8384fe8bf Mon Sep 17 00:00:00 2001
From: zac <x@xs-MacBook-Pro.local>
Date: Thu, 2 Apr 2020 16:25:41 -0400
Subject: [PATCH 30/31] Add radio has-symptoms, update validation, and hiding
 symptoms

---
 app/views/pages/report.ejs | 65 +++++++++++++++++++++++++++++++-------
 1 file changed, 54 insertions(+), 11 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index f4215c84..0b17e16f 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -446,7 +446,19 @@
       <img src="/static/images/symptoms.svg" alt="" class="h-16 w-16">
       <h3 class="text-cvs-red text-xl font-bold m-4"><%= __("Symptoms") %></h3>
     </div>
+
     <fieldset>
+      <legend class="mb-0"><%= __('Have you experienced any symptoms?')%> </legend>
+      <p>
+          <input required type="radio" id="has-symptoms-yes" name="has-symptoms" value="yes" onclick="showHideSymptomsCheckboxes()" <%= symptoms ? 'checked' : '' %>>
+          <label class="mr-4" for="has-symptoms-yes"><%= __('Yes')%></label>
+  
+          <input required type="radio" id="has-symptoms-no" name="has-symptoms" value="no" onclick="showHideSymptomsCheckboxes()" <%= !symptoms && smokingHabit ? 'checked' : '' %>>
+          <label for="has-symptoms-no"><%= __('No')%></label>
+      </p>
+      </fieldset>
+
+    <fieldset id="symptoms-checkboxes" style="display:none;">
     <legend class="mb-0"><%= __('Symptoms you have experienced') %></legend>
     <p class="mb-4"><%- __('Select only the symptoms you have experienced') %></p>
 
@@ -710,6 +722,28 @@
     altFormat: '<%= __(`F j, Y`) %>',
     dateFormat: 'Y-m-d'
   });
+  //accepts a collection of html elements and returns true if any of the elements is checked
+  function isRadioButtonSet(collection) {
+    var re = false;
+    for (var i = 0; i < collection.length; i++) {
+      if (collection[i].checked) {
+        re = true;
+        break;
+      }
+    };
+    return re;
+  }
+
+  //returns the radio button that is set or false if none are
+  function radioSet(collection) {
+    for (var i = 0; i < collection.length; i++) {
+      if (collection[i].checked) {
+        return collection[i];
+        break;
+      }
+    };
+    return false;
+  }
 </script>
 
 <script>
@@ -730,6 +764,21 @@
     document.getElementById('symptom-start-question').style.display = 'block';
   }
 
+  function showHideSymptomsCheckboxes() {
+    var hasSymptoms = document.getElementsByName("has-symptoms");
+    if (isRadioButtonSet(hasSymptoms)) {
+      if (radioSet(hasSymptoms).value === "yes") {
+        document.getElementById('symptoms-checkboxes').style.display = 'block';
+      } else {
+        document.getElementById('symptoms-checkboxes').style.display = 'none';
+      }
+    } else {
+      document.getElementById('symptoms-checkboxes').style.display = 'none';
+    }
+  }
+  showHideSymptomsCheckboxes();
+  
+
   changeTestResultDisplay(document.getElementById("been-tested-yes").checked);
 
   var hasPasscodeCookie = document.cookie.includes('passcode');
@@ -801,6 +850,10 @@
   }
 
   var validateSymptoms = function() {
+    var hasSymptoms = document.getElementsByName("has-symptoms");
+    if (!isRadioButtonSet(hasSymptoms)) {
+      return [false, "<%= __('Please select if you have experienced symptoms') %>"];
+    }
     return [true, undefined];
   }
 
@@ -827,17 +880,7 @@
     validateHealth
   ];
 
-//accepts a collection of html elements and returns true if any of the elements is checked
-  function isRadioButtonSet(collection) {
-    var re = false;
-    for (var i = 0; i < collection.length; i++) {
-      if (collection[i].checked) {
-        re = true;
-        break;
-      }
-    };
-    return re;
-  }
+
 </script>
 
 <script>

From 471e7fe4572bba00171492c379fd32064a03fe6c Mon Sep 17 00:00:00 2001
From: zacel <54048016+zacel@users.noreply.github.com>
Date: Sun, 5 Apr 2020 17:13:39 -0400
Subject: [PATCH 31/31] Update app/views/pages/report.ejs

remove mb-0 class

Co-Authored-By: Eirik Fosse <eirik@bustbyte.no>
---
 app/views/pages/report.ejs | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/views/pages/report.ejs b/app/views/pages/report.ejs
index 0b17e16f..6bd82a17 100644
--- a/app/views/pages/report.ejs
+++ b/app/views/pages/report.ejs
@@ -448,7 +448,7 @@
     </div>
 
     <fieldset>
-      <legend class="mb-0"><%= __('Have you experienced any symptoms?')%> </legend>
+      <legend><%= __('Have you experienced any symptoms?')%> </legend>
       <p>
           <input required type="radio" id="has-symptoms-yes" name="has-symptoms" value="yes" onclick="showHideSymptomsCheckboxes()" <%= symptoms ? 'checked' : '' %>>
           <label class="mr-4" for="has-symptoms-yes"><%= __('Yes')%></label>
@@ -1035,4 +1035,3 @@
 
 
 <%- include('partials/footer', { home: true }) -%>
-