pr360-questionnaire 0.0.2 → 0.0.3

package/build/questionnaire-test.js

@@ -16763,21 +16763,21 @@
 @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
 h1 {
   font-size: 2rem;
-  font-family: "Lato", Calibri, Tahoma, sans-serif;
+  font-family: "Lato", Helvetica, sans-serif;
   font-weight: 700;
 }
 
 h2 {
   font-weight: 300;
   margin: 0px;
-  font-family: "Lato", Calibri, Tahoma, sans-serif;
+  font-family: "Lato", Helvetica, sans-serif;
   font-size: 1.5rem;
 }
 
 h3 {
   font-weight: 300;
   margin-top: 0px;
-  font-family: "Lato", Calibri, Tahoma, sans-serif;
+  font-family: "Lato", Helvetica, sans-serif;
   font-size: 1rem;
 }
 
@@ -16796,6 +16796,7 @@ h3 {
   align-items: center;
   justify-content: center;
   padding: 0 30px;
+  min-height: 360px;
 }
 @media screen and (max-width: 700px) {
   .questionnaire--bt-contain {
@@ -16819,16 +16820,17 @@ h3 {
   width: 80%;
   max-width: 350px;
 }
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 1200px) {
   .questionnaire-illustration {
     margin-bottom: 35px;
   }
 }
 
-button {
-  font-family: "lato", Calibri, Tahoma, sans-serif;
+.button--primary {
+  font-family: "lato", Helvetica, sans-serif;
   padding: 10px 35px;
-  width: 400px;
+  min-width: 150px;
+  width: 35vw;
   min-height: 85px;
   display: block;
   border: 1px solid #8c8c8c;
@@ -16840,28 +16842,57 @@ button {
   line-height: 23px;
   transition: transform 150ms;
 }
-@media screen and (max-width: 700px) {
-  button {
+@media screen and (max-width: 1200px) {
+  .button--primary {
     height: unset;
   }
 }
 
-button:hover {
+.button--primary:hover {
   border: 2px solid #e9a0a1;
-  transform: translateY(4px);
+  transform: translateY(2px);
+}
+
+.button--begin {
+  font-family: "lato", Helvetica, sans-serif;
+  padding: 5px 25px;
+  min-height: 60px;
+  width: 150px;
+  border: 1px solid #cacaca;
+  border-radius: 20px;
+  background-color: #fff;
+  font-size: 1rem;
+  font-weight: 300;
+  transition: transform 150ms;
+}
+.button--begin:hover {
+  background-color: #efefef;
+  transform: translateY(2px);
+}
+
+.button--link {
+  color: #8c8c8c;
+  background-color: transparent;
+  border: none;
+  position: absolute;
+  top: 15px;
+  left: 15px;
+}
+.button--link:hover {
+  text-decoration: underline;
 }
 
 .contactform--container {
   padding: 100px;
 }
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 1200px) {
   .contactform--container {
     padding: 100px 15px;
     width: 92%;
   }
 }
 .contactform--container label {
-  width: 28%;
+  width: 315px;
   display: block;
   margin: 0 auto;
   text-align: left;
@@ -16869,9 +16900,9 @@ button:hover {
 }
 .contactform--container input {
   display: block;
-  font-family: "lato", Calibri, Tahoma, sans-serif;
+  font-family: "lato", Helvetica, sans-serif;
   padding: 5px 15px;
-  width: 25%;
+  width: 300px !important;
   display: block;
   margin: 0 auto;
   text-align: left;
@@ -16885,7 +16916,7 @@ button:hover {
   font-weight: 300;
   transition: all 0.3s ease;
 }
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 1200px) {
   .contactform--container input {
     width: unset;
   }
@@ -16893,9 +16924,29 @@ button:hover {
 .contactform--container button {
   background-color: #e9a0a1;
   color: #fff;
+  border: 0;
+  border-radius: 30px;
   max-width: 20%;
   display: inline-block;
   min-height: 50px;
+  font-family: "lato", Helvetica, sans-serif;
+  padding: 10px 35px;
+  min-width: 150px;
+  margin-bottom: 20px;
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 23px;
+  transition: transform 150ms;
+}
+
+.video--container {
+  padding: 50px;
+}
+@media screen and (max-width: 1200px) {
+  .video--container {
+    padding: 100px 15px;
+    width: 92%;
+  }
 }
 
 .fade-in {
@@ -16934,16 +16985,31 @@ button:hover {
   margin-bottom: 0px;
 }
 
+.u-margin--bt {
+  margin-bottom: 15px;
+}
+
 .u-margin--top {
   margin-top: 15px;
+}
+
+.questionnaire--video {
+  width: 60%;
+  min-height: 400px;
+}
+@media screen and (max-width: 1200px) {
+  .questionnaire--video {
+    width: 100%;
+    min-height: 200px;
+  }
 }`;
 
   // js/questionnaire.ts
   var QuestionnaireElement = class extends s4 {
     constructor() {
-      super();
+      super(...arguments);
+      this.visitedNodes = [];
       this.hubspotId = "40834387";
-      this.addEventListener("click", this.openModal);
     }
     get topic() {
       return `questionnaires:${this.siteId}`;
@@ -16961,8 +17027,7 @@ button:hover {
     }
     render() {
       return x`
-      <h2>Questionnaire</h2>
-      <slot></slot>
+      <button class="button--begin" @click=${this.openModal}><slot>Begin</slot></button>
       <dialog id="question-modal" class="questionnaire--modal">${this.renderCurrentStep()}</dialog>
     `;
     }
@@ -16978,15 +17043,19 @@ button:hover {
     }
     renderVideo() {
       return x`
-    <div>${this.currentStep.text}</div>
-    <vimeo-video controls src=${this.currentStep.url}></vimeo-video>
+    <div class="video--container">
+      <h1 class="u-margin-none--bt">Thanks for that!</h1>
+      <h2 class="u-margin--bt">${this.currentStep.text}</h2>
+      <span class="questionnaire--video">
+      <vimeo-video controls src=${this.currentStep.url} class="questionnaire--video"></vimeo-video></span>
+    </div>
   `;
     }
     renderContactInfo() {
       return x`
-    <form class="contactform--container">
+    <form class="contactform--container" @submit=${this.submitContactInfo}>
     <h1 class="u-margin-none--bt">We think we can help.</h1>
-    <h2>Enter your information below to get your assesment.</h2>
+    <h2>${this.currentStep.text}</h2>
       <div class="u-margin--top">
         <label for="name">Name</label>
         <input type="text" id="name" name="name" required/>
@@ -16999,7 +17068,7 @@ button:hover {
         <label for="phone">Phone</label>
         <input type="tel" id="phone" name="phone" required/>
       </div>
-      <button type="submit" @click=${this.submitContactInfo}>Submit</button>
+      <button type="submit">Submit</button>
     </form>
     `;
     }
@@ -17009,7 +17078,8 @@ button:hover {
     <div class="questionnaire--header">
     <h1> ${this.questionnaireName} </h1>
     </div>
-    <div class="questionnaire--question"> <h2>${question.text}</h2></div>
+    <div class="questionnaire--question"><h2>${question.text}</h2></div>
+    <div class="questionnaire--subtitle"><h3>${question.subtitle}</h3></div>
     <div class="questionnaire--bt-contain">
       <div class="questionnaire-illustration"><img src=${question.url}> </div>
       <div>
@@ -17018,13 +17088,16 @@ button:hover {
         `)}
       </div>
     </div>
+    ${this.visitedNodes.length > 1 ? x`<button  class="button--link" @click=${this.goBack}>Back</button>` : x``}
     `;
     }
     openModal() {
       this.modal?.showModal();
     }
+    goBack(_event) {
+      this.dispatchEvent(new CustomEvent("goBack"));
+    }
     answerQuestion(event) {
-      console.log(event);
       event.stopPropagation();
       this.dispatchEvent(new CustomEvent("answerQuestion", {
         detail: {
@@ -17033,16 +17106,21 @@ button:hover {
       }));
     }
     submitContactInfo(event) {
-      event.preventDefault();
       event.stopPropagation();
-      this.dispatchEvent(new CustomEvent("submitContactInfo", {
-        detail: {
-          nodeId: this.currentStep?.id,
-          name: this.nameInput.value,
-          email: this.emailInput.value,
-          phone_number: this.phoneInput.value
-        }
-      }));
+      event.preventDefault();
+      if (this.contactInfoForm?.checkValidity()) {
+        const email = this.emailInput?.value;
+        window["_hsq"] = window["_hsq"] || [];
+        window["_hsq"].push(["identify", { email }]);
+        this.dispatchEvent(new CustomEvent("submitContactInfo", {
+          detail: {
+            nodeId: this.currentStep?.id,
+            name: this.nameInput.value,
+            email,
+            phone_number: this.phoneInput.value
+          }
+        }));
+      }
     }
   };
   QuestionnaireElement.styles = questionnaire_lit_default;
@@ -17052,6 +17130,9 @@ button:hover {
   __decorateClass([
     t3()
   ], QuestionnaireElement.prototype, "questionnaireName", 2);
+  __decorateClass([
+    t3()
+  ], QuestionnaireElement.prototype, "visitedNodes", 2);
   __decorateClass([
     n5(),
     liveStateConfig("url")
@@ -17074,15 +17155,18 @@ button:hover {
   __decorateClass([
     i4("#phone")
   ], QuestionnaireElement.prototype, "phoneInput", 2);
+  __decorateClass([
+    i4("form")
+  ], QuestionnaireElement.prototype, "contactInfoForm", 2);
   __decorateClass([
     liveStateConfig("topic")
   ], QuestionnaireElement.prototype, "topic", 1);
   QuestionnaireElement = __decorateClass([
     e4("pr360-questionnaire"),
     liveStateDecorator_default({
-      properties: ["currentStep", "questionnaireName"],
+      properties: ["currentStep", "questionnaireName", "visitedNodes"],
       events: {
-        send: ["answerQuestion", "submitContactInfo"]
+        send: ["answerQuestion", "submitContactInfo", "goBack"]
       },
       provide: {
         scope: window,
@@ -31466,16 +31550,18 @@ ${inspect(response)}
 
   // test/questionnaire-test.ts
   describe("questionnaire test", async () => {
+    let questionnaireElement;
     beforeEach(async () => {
       window["questionnaireState"] = sinon_esm_default.createStubInstance(src_default);
-    });
-    it("renders a question", async () => {
-      const questionnaireElement = await fixture(`
+      questionnaireElement = await fixture(`
       <pr360-questionnaire url="wss://foo.bar">
         <button>Click me</button>
       </pr360-questionnaire>
     `);
+    });
+    it("renders a question", async () => {
       questionnaireElement.currentStep = {
+        subtitle: "foo",
         id: "1",
         type: "Question",
         text: "What is your favorite color?",
@@ -31494,11 +31580,6 @@ ${inspect(response)}
       f2(questionnaireElement.shadowRoot?.textContent).to.contain("What is your favorite color?");
     });
     it("adds hubspot tracking code", async () => {
-      const questionnaireElement = await fixture(`
-      <pr360-questionnaire url="wss://foo.bar">
-        <button>Click me</button>
-      </pr360-questionnaire>
-    `);
       const script = document.querySelector("script#hs-script-loader");
       f2(script).to.not.be.null;
     });

package/css/questionnaire.lit.scss

@@ -2,21 +2,21 @@
 
 h1 {
     font-size: 2rem;
-    font-family: 'Lato', Calibri, Tahoma, sans-serif;
+    font-family: 'Lato', Helvetica, sans-serif;
     font-weight: 700;
 
 }
 h2 {
    font-weight: 300;
    margin: 0px;
-   font-family: 'Lato', Calibri, Tahoma, sans-serif;
+   font-family: 'Lato', Helvetica, sans-serif;
    font-size: 1.5rem; 
 }
 
 h3 {
     font-weight: 300;
     margin-top: 0px;
-    font-family: 'Lato', Calibri, Tahoma, sans-serif;
+    font-family: 'Lato', Helvetica, sans-serif;
     font-size: 1rem; 
 
     }
@@ -36,6 +36,7 @@ h3 {
     align-items: center;
     justify-content: center;
     padding: 0 30px;
+    min-height: 360px;
 
     @media screen and (max-width: 700px) {
         flex-direction: column;
@@ -59,15 +60,16 @@ h3 {
     max-width: 350px;
  }
 
- @media screen and (max-width: 700px) {
+ @media screen and (max-width: 1200px) {
    margin-bottom: 35px;
 }
 }
 
-button {
-    font-family: "lato", Calibri, Tahoma, sans-serif;
+.button--primary {
+    font-family: "lato", Helvetica, sans-serif;
     padding: 10px 35px;
-    width: 400px;
+    min-width: 150px;
+    width: 35vw;
     min-height: 85px;
     display: block;
     border: 1px solid #8c8c8c;
@@ -79,26 +81,62 @@ button {
     line-height: 23px;
     transition: transform 150ms;
 
-    @media screen and (max-width: 700px) {
+    @media screen and (max-width: 1200px) {
         height: unset;
      }
 }
 
-button:hover {
-    border: 2px solid #e9a0a1;
-    transform: translateY(4px);
+.button--primary:hover {
+  border: 2px solid #e9a0a1;
+  transform: translateY(2px);
+}
+
+
+.button--begin {
+  font-family: "lato", Helvetica, sans-serif;
+  padding: 5px 25px;
+  min-height: 60px;
+  width: 150px;
+  border: 1px solid #cacaca;
+  border-radius: 20px;
+  background-color: #fff;
+  font-size: 1rem;
+  font-weight: 300;
+  transition: transform 150ms;
+
+  &:hover {
+    background-color: #efefef;
+    transform: translateY(2px);
+  }
+
+}
+
+
+.button--link {
+  color: #8c8c8c;
+  background-color: transparent;
+  border:none;
+  position: absolute;
+    top: 15px;
+    left: 15px;
+
+    &:hover {
+      text-decoration: underline;
+    }
 }
 
+
+
 .contactform--container {
     padding: 100px;
 
-    @media screen and (max-width: 700px) {
+    @media screen and (max-width: 1200px) {
         padding: 100px 15px;
         width: 92%;
      }
 
    label {
-    width: 28%;
+    width: 315px;
     display: block;
     margin: 0 auto;
     text-align: left;
@@ -107,9 +145,9 @@ button:hover {
 
     input {
         display: block;
-        font-family: "lato", Calibri, Tahoma, sans-serif;
+        font-family: "lato", Helvetica, sans-serif;
         padding: 5px 15px;
-        width: 25%;
+        width: 300px !important;
         display: block;
         margin: 0 auto;
         text-align: left;
@@ -123,7 +161,7 @@ button:hover {
         font-weight: 300;
         transition: all .3s ease;
 
-        @media screen and (max-width: 700px) {
+        @media screen and (max-width: 1200px) {
             width: unset;
          }
     }
@@ -132,12 +170,31 @@ button:hover {
     button {
         background-color: #e9a0a1;
         color: #fff;
+        border: 0;
+        border-radius: 30px;
         max-width: 20%;
         display: inline-block;
         min-height: 50px;
+        font-family: "lato", Helvetica, sans-serif;
+        padding: 10px 35px;
+        min-width: 150px;
+        margin-bottom: 20px;
+        font-size: 1rem;
+        font-weight: 300;
+        line-height: 23px;
+        transition: transform 150ms;
     }
 }
 
+.video--container {
+  padding: 50px;
+
+  @media screen and (max-width: 1200px) {
+      padding: 100px 15px;
+      width: 92%;
+   }
+  }
+
 .fade-in {
     animation: fadeIn ease 1.2s;
     -webkit-animation: fadeIn ease 1.2s;
@@ -176,6 +233,20 @@ button:hover {
     margin-bottom: 0px;
 }
 
+.u-margin--bt {
+  margin-bottom: 15px;
+}
+
 .u-margin--top {
     margin-top: 15px;
+}
+
+.questionnaire--video {
+  width: 60%;
+  min-height: 400px;
+
+  @media screen and (max-width: 1200px) {
+    width: 100%;
+    min-height: 200px;
+ }
 }

package/dist/index.js

@@ -6957,21 +6957,21 @@
 @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
 h1 {
   font-size: 2rem;
-  font-family: "Lato", Calibri, Tahoma, sans-serif;
+  font-family: "Lato", Helvetica, sans-serif;
   font-weight: 700;
 }
 
 h2 {
   font-weight: 300;
   margin: 0px;
-  font-family: "Lato", Calibri, Tahoma, sans-serif;
+  font-family: "Lato", Helvetica, sans-serif;
   font-size: 1.5rem;
 }
 
 h3 {
   font-weight: 300;
   margin-top: 0px;
-  font-family: "Lato", Calibri, Tahoma, sans-serif;
+  font-family: "Lato", Helvetica, sans-serif;
   font-size: 1rem;
 }
 
@@ -6990,6 +6990,7 @@ h3 {
   align-items: center;
   justify-content: center;
   padding: 0 30px;
+  min-height: 360px;
 }
 @media screen and (max-width: 700px) {
   .questionnaire--bt-contain {
@@ -7013,16 +7014,17 @@ h3 {
   width: 80%;
   max-width: 350px;
 }
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 1200px) {
   .questionnaire-illustration {
     margin-bottom: 35px;
   }
 }
 
-button {
-  font-family: "lato", Calibri, Tahoma, sans-serif;
+.button--primary {
+  font-family: "lato", Helvetica, sans-serif;
   padding: 10px 35px;
-  width: 400px;
+  min-width: 150px;
+  width: 35vw;
   min-height: 85px;
   display: block;
   border: 1px solid #8c8c8c;
@@ -7034,28 +7036,57 @@ button {
   line-height: 23px;
   transition: transform 150ms;
 }
-@media screen and (max-width: 700px) {
-  button {
+@media screen and (max-width: 1200px) {
+  .button--primary {
     height: unset;
   }
 }
 
-button:hover {
+.button--primary:hover {
   border: 2px solid #e9a0a1;
-  transform: translateY(4px);
+  transform: translateY(2px);
+}
+
+.button--begin {
+  font-family: "lato", Helvetica, sans-serif;
+  padding: 5px 25px;
+  min-height: 60px;
+  width: 150px;
+  border: 1px solid #cacaca;
+  border-radius: 20px;
+  background-color: #fff;
+  font-size: 1rem;
+  font-weight: 300;
+  transition: transform 150ms;
+}
+.button--begin:hover {
+  background-color: #efefef;
+  transform: translateY(2px);
+}
+
+.button--link {
+  color: #8c8c8c;
+  background-color: transparent;
+  border: none;
+  position: absolute;
+  top: 15px;
+  left: 15px;
+}
+.button--link:hover {
+  text-decoration: underline;
 }
 
 .contactform--container {
   padding: 100px;
 }
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 1200px) {
   .contactform--container {
     padding: 100px 15px;
     width: 92%;
   }
 }
 .contactform--container label {
-  width: 28%;
+  width: 315px;
   display: block;
   margin: 0 auto;
   text-align: left;
@@ -7063,9 +7094,9 @@ button:hover {
 }
 .contactform--container input {
   display: block;
-  font-family: "lato", Calibri, Tahoma, sans-serif;
+  font-family: "lato", Helvetica, sans-serif;
   padding: 5px 15px;
-  width: 25%;
+  width: 300px !important;
   display: block;
   margin: 0 auto;
   text-align: left;
@@ -7079,7 +7110,7 @@ button:hover {
   font-weight: 300;
   transition: all 0.3s ease;
 }
-@media screen and (max-width: 700px) {
+@media screen and (max-width: 1200px) {
   .contactform--container input {
     width: unset;
   }
@@ -7087,9 +7118,29 @@ button:hover {
 .contactform--container button {
   background-color: #e9a0a1;
   color: #fff;
+  border: 0;
+  border-radius: 30px;
   max-width: 20%;
   display: inline-block;
   min-height: 50px;
+  font-family: "lato", Helvetica, sans-serif;
+  padding: 10px 35px;
+  min-width: 150px;
+  margin-bottom: 20px;
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 23px;
+  transition: transform 150ms;
+}
+
+.video--container {
+  padding: 50px;
+}
+@media screen and (max-width: 1200px) {
+  .video--container {
+    padding: 100px 15px;
+    width: 92%;
+  }
 }
 
 .fade-in {
@@ -7128,16 +7179,31 @@ button:hover {
   margin-bottom: 0px;
 }
 
+.u-margin--bt {
+  margin-bottom: 15px;
+}
+
 .u-margin--top {
   margin-top: 15px;
+}
+
+.questionnaire--video {
+  width: 60%;
+  min-height: 400px;
+}
+@media screen and (max-width: 1200px) {
+  .questionnaire--video {
+    width: 100%;
+    min-height: 200px;
+  }
 }`;
 
   // js/questionnaire.ts
   var QuestionnaireElement = class extends s4 {
     constructor() {
-      super();
+      super(...arguments);
+      this.visitedNodes = [];
       this.hubspotId = "40834387";
-      this.addEventListener("click", this.openModal);
     }
     get topic() {
       return `questionnaires:${this.siteId}`;
@@ -7155,8 +7221,7 @@ button:hover {
     }
     render() {
       return x`
-      <h2>Questionnaire</h2>
-      <slot></slot>
+      <button class="button--begin" @click=${this.openModal}><slot>Begin</slot></button>
       <dialog id="question-modal" class="questionnaire--modal">${this.renderCurrentStep()}</dialog>
     `;
     }
@@ -7172,15 +7237,19 @@ button:hover {
     }
     renderVideo() {
       return x`
-    <div>${this.currentStep.text}</div>
-    <vimeo-video controls src=${this.currentStep.url}></vimeo-video>
+    <div class="video--container">
+      <h1 class="u-margin-none--bt">Thanks for that!</h1>
+      <h2 class="u-margin--bt">${this.currentStep.text}</h2>
+      <span class="questionnaire--video">
+      <vimeo-video controls src=${this.currentStep.url} class="questionnaire--video"></vimeo-video></span>
+    </div>
   `;
     }
     renderContactInfo() {
       return x`
-    <form class="contactform--container">
+    <form class="contactform--container" @submit=${this.submitContactInfo}>
     <h1 class="u-margin-none--bt">We think we can help.</h1>
-    <h2>Enter your information below to get your assesment.</h2>
+    <h2>${this.currentStep.text}</h2>
       <div class="u-margin--top">
         <label for="name">Name</label>
         <input type="text" id="name" name="name" required/>
@@ -7193,7 +7262,7 @@ button:hover {
         <label for="phone">Phone</label>
         <input type="tel" id="phone" name="phone" required/>
       </div>
-      <button type="submit" @click=${this.submitContactInfo}>Submit</button>
+      <button type="submit">Submit</button>
     </form>
     `;
     }
@@ -7203,7 +7272,8 @@ button:hover {
     <div class="questionnaire--header">
     <h1> ${this.questionnaireName} </h1>
     </div>
-    <div class="questionnaire--question"> <h2>${question.text}</h2></div>
+    <div class="questionnaire--question"><h2>${question.text}</h2></div>
+    <div class="questionnaire--subtitle"><h3>${question.subtitle}</h3></div>
     <div class="questionnaire--bt-contain">
       <div class="questionnaire-illustration"><img src=${question.url}> </div>
       <div>
@@ -7212,13 +7282,16 @@ button:hover {
         `)}
       </div>
     </div>
+    ${this.visitedNodes.length > 1 ? x`<button  class="button--link" @click=${this.goBack}>Back</button>` : x``}
     `;
     }
     openModal() {
       this.modal?.showModal();
     }
+    goBack(_event) {
+      this.dispatchEvent(new CustomEvent("goBack"));
+    }
     answerQuestion(event) {
-      console.log(event);
       event.stopPropagation();
       this.dispatchEvent(new CustomEvent("answerQuestion", {
         detail: {
@@ -7227,16 +7300,21 @@ button:hover {
       }));
     }
     submitContactInfo(event) {
-      event.preventDefault();
       event.stopPropagation();
-      this.dispatchEvent(new CustomEvent("submitContactInfo", {
-        detail: {
-          nodeId: this.currentStep?.id,
-          name: this.nameInput.value,
-          email: this.emailInput.value,
-          phone_number: this.phoneInput.value
-        }
-      }));
+      event.preventDefault();
+      if (this.contactInfoForm?.checkValidity()) {
+        const email = this.emailInput?.value;
+        window["_hsq"] = window["_hsq"] || [];
+        window["_hsq"].push(["identify", { email }]);
+        this.dispatchEvent(new CustomEvent("submitContactInfo", {
+          detail: {
+            nodeId: this.currentStep?.id,
+            name: this.nameInput.value,
+            email,
+            phone_number: this.phoneInput.value
+          }
+        }));
+      }
     }
   };
   QuestionnaireElement.styles = questionnaire_lit_default;
@@ -7246,6 +7324,9 @@ button:hover {
   __decorateClass([
     t3()
   ], QuestionnaireElement.prototype, "questionnaireName", 2);
+  __decorateClass([
+    t3()
+  ], QuestionnaireElement.prototype, "visitedNodes", 2);
   __decorateClass([
     n5(),
     liveStateConfig("url")
@@ -7268,15 +7349,18 @@ button:hover {
   __decorateClass([
     i4("#phone")
   ], QuestionnaireElement.prototype, "phoneInput", 2);
+  __decorateClass([
+    i4("form")
+  ], QuestionnaireElement.prototype, "contactInfoForm", 2);
   __decorateClass([
     liveStateConfig("topic")
   ], QuestionnaireElement.prototype, "topic", 1);
   QuestionnaireElement = __decorateClass([
     e4("pr360-questionnaire"),
     liveStateDecorator_default({
-      properties: ["currentStep", "questionnaireName"],
+      properties: ["currentStep", "questionnaireName", "visitedNodes"],
       events: {
-        send: ["answerQuestion", "submitContactInfo"]
+        send: ["answerQuestion", "submitContactInfo", "goBack"]
       },
       provide: {
         scope: window,

package/js/app.js

@@ -21,9 +21,16 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
+import Prism from './prism';
+
+const PrismHook = {
+  mounted() { this.highlight() },
+  reconnected() { this.highlight() },
+  highlight() { Prism.highlightAll() }
+};
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: {Prism: PrismHook}})
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
@@ -39,4 +46,4 @@ liveSocket.connect()
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
 
-import './questionnaire.ts'
+import './questionnaire.ts';

package/js/prism.js

@@ -0,0 +1,7 @@
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup&plugins=unescaped-markup+toolbar+copy-to-clipboard */
+var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(n,t){var r,i;switch(t=t||{},a.util.type(n)){case"Object":if(i=a.util.objId(n),t[i])return t[i];for(var l in r={},t[i]=r,n)n.hasOwnProperty(l)&&(r[l]=e(n[l],t));return r;case"Array":return i=a.util.objId(n),t[i]?t[i]:(r=[],t[i]=r,n.forEach((function(n,a){r[a]=e(n,t)})),r);default:return n}},getLanguage:function(e){for(;e;){var t=n.exec(e.className);if(t)return t[1].toLowerCase();e=e.parentElement}return"none"},setLanguage:function(e,t){e.className=e.className.replace(RegExp(n,"gi"),""),e.classList.add("language-"+t)},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack)||[])[1];if(e){var n=document.getElementsByTagName("script");for(var t in n)if(n[t].src==e)return n[t]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:r,plaintext:r,text:r,txt:r,extend:function(e,n){var t=a.util.clone(a.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(e,n,t,r){var i=(r=r||a.languages)[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in t)t.hasOwnProperty(s)&&(l[s]=t[s]);t.hasOwnProperty(o)||(l[o]=i[o])}var u=r[e];return r[e]=l,a.languages.DFS(a.languages,(function(n,t){t===u&&n!=e&&(this[n]=l)})),l},DFS:function e(n,t,r,i){i=i||{};var l=a.util.objId;for(var o in n)if(n.hasOwnProperty(o)){t.call(n,o,n[o],r||o);var s=n[o],u=a.util.type(s);"Object"!==u||i[l(s)]?"Array"!==u||i[l(s)]||(i[l(s)]=!0,e(s,t,o,i)):(i[l(s)]=!0,e(s,t,null,i))}}},plugins:{},highlightAll:function(e,n){a.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};a.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),a.hooks.run("before-all-elements-highlight",r);for(var i,l=0;i=r.elements[l++];)a.highlightElement(i,!0===n,r.callback)},highlightElement:function(n,t,r){var i=a.util.getLanguage(n),l=a.languages[i];a.util.setLanguage(n,i);var o=n.parentElement;o&&"pre"===o.nodeName.toLowerCase()&&a.util.setLanguage(o,i);var s={element:n,language:i,grammar:l,code:n.textContent};function u(e){s.highlightedCode=e,a.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,a.hooks.run("after-highlight",s),a.hooks.run("complete",s),r&&r.call(s.element)}if(a.hooks.run("before-sanity-check",s),(o=s.element.parentElement)&&"pre"===o.nodeName.toLowerCase()&&!o.hasAttribute("tabindex")&&o.setAttribute("tabindex","0"),!s.code)return a.hooks.run("complete",s),void(r&&r.call(s.element));if(a.hooks.run("before-highlight",s),s.grammar)if(t&&e.Worker){var c=new Worker(a.filename);c.onmessage=function(e){u(e.data)},c.postMessage(JSON.stringify({language:s.language,code:s.code,immediateClose:!0}))}else u(a.highlight(s.code,s.grammar,s.language));else u(a.util.encode(s.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};if(a.hooks.run("before-tokenize",r),!r.grammar)throw new Error('The language "'+r.language+'" has no grammar.');return r.tokens=a.tokenize(r.code,r.grammar),a.hooks.run("after-tokenize",r),i.stringify(a.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new s;return u(a,a.head,e),o(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=a.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=a.hooks.all[e];if(t&&t.length)for(var r,i=0;r=t[i++];)r(n)}},Token:i};function i(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function l(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function o(e,n,t,r,s,g){for(var f in t)if(t.hasOwnProperty(f)&&t[f]){var h=t[f];h=Array.isArray(h)?h:[h];for(var d=0;d<h.length;++d){if(g&&g.cause==f+","+d)return;var v=h[d],p=v.inside,m=!!v.lookbehind,y=!!v.greedy,k=v.alias;if(y&&!v.pattern.global){var x=v.pattern.toString().match(/[imsuy]*$/)[0];v.pattern=RegExp(v.pattern.source,x+"g")}for(var b=v.pattern||v,w=r.next,A=s;w!==n.tail&&!(g&&A>=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(j<O||"string"==typeof C.value);C=C.next)L++,j+=C.value.length;L--,E=e.slice(A,j),P.index-=A}else if(!(P=l(b,0,E,m)))continue;S=P.index;var N=P[0],_=E.slice(0,S),M=E.slice(S+N.length),W=A+E.length;g&&W>g.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;n.next=r,r.prev=n,e.length-=a}if(e.Prism=a,i.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var r="";return n.forEach((function(n){r+=e(n,t)})),r}var i={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},l=n.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(i.classes,l):i.classes.push(l)),a.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,"&quot;")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+o+">"+i.content+"</"+i.tag+">"},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
+Prism.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var t={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
+"undefined"!=typeof Prism&&"undefined"!=typeof document&&(Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Prism.plugins.UnescapedMarkup=!0,Prism.hooks.add("before-highlightall",(function(e){e.selector+=', [class*="lang-"] script[type="text/plain"], [class*="language-"] script[type="text/plain"], script[type="text/plain"][class*="lang-"], script[type="text/plain"][class*="language-"]'})),Prism.hooks.add("before-sanity-check",(function(e){var t=e.element;if(t.matches('script[type="text/plain"]')){var a=document.createElement("code"),c=document.createElement("pre");c.className=a.className=t.className;var n=t.dataset;return Object.keys(n||{}).forEach((function(e){Object.prototype.hasOwnProperty.call(n,e)&&(c.dataset[e]=n[e])})),a.textContent=e.code=e.code.replace(/&lt;\/script(?:>|&gt;)/gi,"<\/script>"),c.appendChild(a),t.parentNode.replaceChild(c,t),void(e.element=a)}if(!e.code){var o=t.childNodes;1===o.length&&"#comment"==o[0].nodeName&&(t.textContent=e.code=o[0].textContent)}})));
+!function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){var e=[],t={},n=function(){};Prism.plugins.toolbar={};var a=Prism.plugins.toolbar.registerButton=function(n,a){var r;r="function"==typeof a?a:function(e){var t;return"function"==typeof a.onClick?((t=document.createElement("button")).type="button",t.addEventListener("click",(function(){a.onClick.call(this,e)}))):"string"==typeof a.url?(t=document.createElement("a")).href=a.url:t=document.createElement("span"),a.className&&t.classList.add(a.className),t.textContent=a.text,t},n in t?console.warn('There is a button with the key "'+n+'" registered already.'):e.push(t[n]=r)},r=Prism.plugins.toolbar.hook=function(a){var r=a.element.parentNode;if(r&&/pre/i.test(r.nodeName)&&!r.parentNode.classList.contains("code-toolbar")){var o=document.createElement("div");o.classList.add("code-toolbar"),r.parentNode.insertBefore(o,r),o.appendChild(r);var i=document.createElement("div");i.classList.add("toolbar");var l=e,d=function(e){for(;e;){var t=e.getAttribute("data-toolbar-order");if(null!=t)return(t=t.trim()).length?t.split(/\s*,\s*/g):[];e=e.parentElement}}(a.element);d&&(l=d.map((function(e){return t[e]||n}))),l.forEach((function(e){var t=e(a);if(t){var n=document.createElement("div");n.classList.add("toolbar-item"),n.appendChild(t),i.appendChild(n)}})),o.appendChild(i)}};a("label",(function(e){var t=e.element.parentNode;if(t&&/pre/i.test(t.nodeName)&&t.hasAttribute("data-label")){var n,a,r=t.getAttribute("data-label");try{a=document.querySelector("template#"+r)}catch(e){}return a?n=a.content:(t.hasAttribute("data-url")?(n=document.createElement("a")).href=t.getAttribute("data-url"):n=document.createElement("span"),n.textContent=r),n}})),Prism.hooks.add("complete",r)}}();
+!function(){function t(t){var e=document.createElement("textarea");e.value=t.getText(),e.style.top="0",e.style.left="0",e.style.position="fixed",document.body.appendChild(e),e.focus(),e.select();try{var o=document.execCommand("copy");setTimeout((function(){o?t.success():t.error()}),1)}catch(e){setTimeout((function(){t.error(e)}),1)}document.body.removeChild(e)}"undefined"!=typeof Prism&&"undefined"!=typeof document&&(Prism.plugins.toolbar?Prism.plugins.toolbar.registerButton("copy-to-clipboard",(function(e){var o=e.element,n=function(t){var e={copy:"Copy","copy-error":"Press Ctrl+C to copy","copy-success":"Copied!","copy-timeout":5e3};for(var o in e){for(var n="data-prismjs-"+o,c=t;c&&!c.hasAttribute(n);)c=c.parentElement;c&&(e[o]=c.getAttribute(n))}return e}(o),c=document.createElement("button");c.className="copy-to-clipboard-button",c.setAttribute("type","button");var r=document.createElement("span");return c.appendChild(r),u("copy"),function(e,o){e.addEventListener("click",(function(){!function(e){navigator.clipboard?navigator.clipboard.writeText(e.getText()).then(e.success,(function(){t(e)})):t(e)}(o)}))}(c,{getText:function(){return o.textContent},success:function(){u("copy-success"),i()},error:function(){u("copy-error"),setTimeout((function(){!function(t){window.getSelection().selectAllChildren(t)}(o)}),1),i()}}),c;function i(){setTimeout((function(){u("copy")}),n["copy-timeout"])}function u(t){r.textContent=n[t],c.setAttribute("data-copy-state",t)}})):console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."))}();

package/js/questionnaire.ts

@@ -11,6 +11,7 @@ export type Question = {
   text: string;
   answers: Answer[];
   url: string;
+  subtitle: string;
 }
 
 export type Video = {
@@ -23,6 +24,7 @@ export type Video = {
 export type ContactInfo = {
   id: string;
   type: "ContactInfo";
+  text: string;
 }
 
 export type Answer = {
@@ -32,9 +34,9 @@ export type Answer = {
 
 @customElement('pr360-questionnaire')
 @liveState({
-  properties: ['currentStep', "questionnaireName"],
+  properties: ['currentStep', 'questionnaireName', 'visitedNodes'],
   events: {
-    send: ['answerQuestion', 'submitContactInfo']
+    send: ['answerQuestion', 'submitContactInfo', 'goBack']
   },
   provide: {
     scope: window,
@@ -43,10 +45,6 @@ export type Answer = {
 })
 export class QuestionnaireElement extends LitElement {
   static styles = questionnaireStyles;
-  constructor() {
-    super();
-    this.addEventListener('click', this.openModal);
-  }
 
   @state()
   currentStep: Question | ContactInfo | Video | undefined;
@@ -54,6 +52,9 @@ export class QuestionnaireElement extends LitElement {
   @state()
   questionnaireName: string;
 
+  @state()
+  visitedNodes: string[] = [];
+
   @property()
   @liveStateConfig('url')
   url: string | undefined;
@@ -76,6 +77,9 @@ export class QuestionnaireElement extends LitElement {
   @query('#phone')
   phoneInput: HTMLInputElement | undefined;
 
+  @query('form')
+  contactInfoForm: HTMLFormElement | undefined;
+
   @liveStateConfig('topic')
   get topic() {
     return `questionnaires:${this.siteId}`;
@@ -95,8 +99,7 @@ export class QuestionnaireElement extends LitElement {
 
   render() {
     return html`
-      <h2>Questionnaire</h2>
-      <slot></slot>
+      <button class="button--begin" @click=${this.openModal}><slot>Begin</slot></button>
       <dialog id="question-modal" class="questionnaire--modal">${this.renderCurrentStep()}</dialog>
     `;
   }
@@ -111,15 +114,19 @@ export class QuestionnaireElement extends LitElement {
 
   renderVideo() {
     return html`
-    <div>${(this.currentStep as Video).text}</div>
-    <vimeo-video controls src=${(this.currentStep as Video).url}></vimeo-video>
+    <div class="video--container">
+      <h1 class="u-margin-none--bt">Thanks for that!</h1>
+      <h2 class="u-margin--bt">${(this.currentStep as Video).text}</h2>
+      <span class="questionnaire--video">
+      <vimeo-video controls src=${(this.currentStep as Video).url} class="questionnaire--video"></vimeo-video></span>
+    </div>
   ` }
 
   renderContactInfo() {
     return html`
-    <form class="contactform--container">
+    <form class="contactform--container" @submit=${this.submitContactInfo}>
     <h1 class="u-margin-none--bt">We think we can help.</h1>
-    <h2>Enter your information below to get your assesment.</h2>
+    <h2>${(this.currentStep as ContactInfo).text}</h2>
       <div class="u-margin--top">
         <label for="name">Name</label>
         <input type="text" id="name" name="name" required/>
@@ -132,7 +139,7 @@ export class QuestionnaireElement extends LitElement {
         <label for="phone">Phone</label>
         <input type="tel" id="phone" name="phone" required/>
       </div>
-      <button type="submit" @click=${this.submitContactInfo}>Submit</button>
+      <button type="submit">Submit</button>
     </form>
     `;
   }
@@ -143,7 +150,8 @@ export class QuestionnaireElement extends LitElement {
     <div class="questionnaire--header">
     <h1> ${this.questionnaireName} </h1>
     </div>
-    <div class="questionnaire--question"> <h2>${question.text}</h2></div>
+    <div class="questionnaire--question"><h2>${question.text}</h2></div>
+    <div class="questionnaire--subtitle"><h3>${question.subtitle}</h3></div>
     <div class="questionnaire--bt-contain">
       <div class="questionnaire-illustration"><img src=${question.url}> </div>
       <div>
@@ -152,6 +160,7 @@ export class QuestionnaireElement extends LitElement {
         `)}
       </div>
     </div>
+    ${this.visitedNodes.length > 1 ? html`<button  class="button--link" @click=${this.goBack}>Back</button>` : html``}
     `;
   }
 
@@ -159,8 +168,11 @@ export class QuestionnaireElement extends LitElement {
     this.modal?.showModal();
   }
 
+  goBack(_event) {
+    this.dispatchEvent(new CustomEvent('goBack'));
+  }
+
   answerQuestion(event: Event) {
-    console.log(event);
     event.stopPropagation();
     this.dispatchEvent(new CustomEvent('answerQuestion', {
       detail: {
@@ -170,15 +182,20 @@ export class QuestionnaireElement extends LitElement {
   }
 
   submitContactInfo(event: Event) {
-    event.preventDefault();
     event.stopPropagation();
-    this.dispatchEvent(new CustomEvent('submitContactInfo', {
-      detail: {
-        nodeId: this.currentStep?.id,
-        name: this.nameInput.value,
-        email: this.emailInput.value,
-        phone_number: this.phoneInput.value
-      }
-    }));
+    event.preventDefault();
+    if (this.contactInfoForm?.checkValidity()) {
+      const email = this.emailInput?.value;
+      window['_hsq'] = window['_hsq'] || [];
+      window['_hsq'].push(['identify', { email: email }]);
+      this.dispatchEvent(new CustomEvent('submitContactInfo', {
+        detail: {
+          nodeId: this.currentStep?.id,
+          name: this.nameInput.value,
+          email: email,
+          phone_number: this.phoneInput.value
+        }
+      }));
+    }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pr360-questionnaire",
   "description": "An element to render a questionnaire for PatientReach 360.",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "dist/index.js",
   "author": {
     "email": "chris@launchscout.com",
@@ -12,7 +12,6 @@
     "type": "github",
     "url": "https://github.com/PatientReach360/patient_reach_360"
   },
-
   "scripts": {
     "build": "node build.mjs",
     "test": "web-test-runner \"build/questionnaire-test.js\" --node-resolve",
@@ -32,6 +31,7 @@
   "devDependencies": {
     "@open-wc/testing": "^3.2.0",
     "@web/test-runner": "^0.17.0",
+    "@web/test-runner-commands": "^0.8.0",
     "sinon": "^15.2.0",
     "typescript": "^5.1.6"
   }

package/test/questionnaire-test.ts

@@ -1,21 +1,24 @@
 import '../js/questionnaire';
 import { expect } from "@esm-bundle/chai";
-import { QuestionnaireElement} from '../js/questionnaire';
+import { ContactInfo, QuestionnaireElement} from '../js/questionnaire';
 import { fixture } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
 import LiveState from 'phx-live-state';
 import sinon from 'sinon';
 
 describe('questionnaire test', async () => {
+  let questionnaireElement: QuestionnaireElement;
   beforeEach(async () => {
     window['questionnaireState'] = sinon.createStubInstance(LiveState);
-  });
-  it('renders a question', async () => {
-    const questionnaireElement: QuestionnaireElement = await fixture(`
+    questionnaireElement = await fixture(`
       <pr360-questionnaire url="wss://foo.bar">
         <button>Click me</button>
       </pr360-questionnaire>
     `);
+  });
+  it('renders a question', async () => {
     questionnaireElement.currentStep = {
+      subtitle: "foo",
       id: "1",
       type: "Question",
       text: "What is your favorite color?",
@@ -34,11 +37,6 @@ describe('questionnaire test', async () => {
     expect(questionnaireElement.shadowRoot?.textContent).to.contain("What is your favorite color?");
   });
   it('adds hubspot tracking code', async () => {
-    const questionnaireElement: QuestionnaireElement = await fixture(`
-      <pr360-questionnaire url="wss://foo.bar">
-        <button>Click me</button>
-      </pr360-questionnaire>
-    `);
     const script = document.querySelector('script#hs-script-loader');
     expect(script).to.not.be.null;
   });