ensemble.html

<!--This file contains the same code that appears on VT Ensemble CMS-->
<!--Author: Hassan Abral (Former ITEE Intern, Github: https://github.com/hassanabral)-->
<style>
   #ux-research-suggestion-tool button.costume-btn {
      font-family: 'Work Sans', sans-serif;
      font-size: 18px;
      color: #fff;
      border: 0;
      border-radius: 3px;
      padding: 15px 30px;
      margin: 20px 5px;

   }

   #ux-research-suggestion-tool button.costume-btn:hover {
      color: #fff;
   }

   #ux-research-suggestion-tool button#back {
      background-color: #ddd;
      color: #333;
      font-size: 16px;
      padding: 15px 30px;
      margin: 10px 5px;

   }

   #ux-research-suggestion-tool button#back:hover {
      background-color: #ccc;
      color: #333;
   }

   .slide {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.5s;
   }

   .active-slide {
      opacity: 1;
      z-index: 2;
   }

   .quiz-container {
      position: relative;
      min-height: 500px;
   }

   #top-heading h1 {
      color: #333;
      margin-bottom: 1rem;
   }

   #top-heading p {
      margin-bottom: 3rem;
      color: #6e6d7a;
      font-size: 1rem;
      font-weight: 600;
   }

   label {
      cursor: pointer;
      margin: 0;
   }

   label p {
      color: #757575;
      font-size: 0.9rem;
   }

   label h2 {
      color: #0d0c22;
   }


   label:hover {
      background: #fafafa;
      border: 1px solid #fafafa;
      -webkit-transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
   }

   .select-button {
      display: flex;
      width: 24px;
      height: 24px;
      border: 1px solid #dbdbde;
      background: #fff;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      -webkit-transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
   }

   .select-button:hover {
      border-color: #333;
      -webkit-transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
   }

   .icon-12 {
      width: 12px;
      height: 12px;
   }

   input[type="radio"]:checked + label .select-button svg, input[type="checkbox"]:checked + label .select-button svg {
      display: inline-block !important;
   }

   input[type="radio"]:checked + label .select-button, input[type="checkbox"]:checked + label .select-button {
      border-color: var(--vt-burntOrange);
      background: var(--vt-burntOrange);
      -webkit-transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
   }

   .text-white {
      color: #fff;
   }

   svg:not(:root) {
      overflow: hidden;
   }

   .fill-current {
      fill: currentColor;
   }

   #top-heading {
      text-align: center;
   }

   button.badge {
      border: 0;
   }

   section > div {
      padding: 0.5rem;
   }

   input[type="radio"], input[type="checkbox"] {
      display: none;
   }

   label {
      min-height: 20rem;
      display: block;
      background: white;
      border: 1px solid #e7e7e9;
      border-radius: 20px;
      padding: 1rem;
      margin-bottom: 1rem;
      position: relative;
      -webkit-transition: all 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
      transition: all 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
   }


   input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
      background: #fff;
      border-color: var(--vt-burntOrange);
   }

   @media only screen and (max-width: 700px) {
      section {
         flex-direction: column;
      }

      label {
         min-height: auto;
      }

      .quiz-container {
         min-height: 775px;
      }
   }

   #progress-bar span {
      cursor: pointer;
      padding: 3px 0;
      width: 100%;
      border: var(--vt-maroon-1t) 1px solid;
      border-left-width: 0;
      text-align: center;
   }

   .text-gray {
      color: #333;
   }

   .custom-link {
      color: #333;
      text-decoration: underline;
   }

   .custom-link:hover {
      color: #c64600;
   }

   button.select-opt[data-selected='true'] {
      color: #fff;
      background: var(--vt-burntOrange);
   }

   button.select-opt[data-selected='false'] {
      color: #212529;
      background: #e5e1e6;
   }

</style>
<div id="ux-research-suggestion-tool">
   <h5><span style="color: #333;">UX Research</span> / <span
      class="text-primary">Which UX Research method should I use?</span>
   </h5>
   <br>
   <div class="container">
      <!--Survey page slides-->
      <div class="quiz-container">
         <div id="quiz">
            <div class="slide" id="slide1Div"></div>
            <div class="slide" id="slide2Div"></div>
            <div class="slide" id="slide3Div"></div>
            <div class="slide" id="slide4Div"></div>
         </div>
      </div>
      <!--Results page: displays the recommended UX research methods-->
      <div>
         <div id="slide5Div"></div>
      </div>
      <!--Selected options section: displays the list of options the user has selected.-->
      <div class="mb-3" id="selected-option-div" style="display: none">
         <div class="selected-option" id="selected-option-title"></div>
         <hr class="mb-4">
         <div class="selected-option mb-1" id="selected-option-1"></div>
         <div class="selected-option mb-1" id="selected-option-2"></div>
         <div class="selected-option mb-1" id="selected-option-3"></div>
         <div class="selected-option mb-1" id="selected-option-4"></div>
      </div>
      <div id="my-results" style="visibility: hidden">
         <div class="d-flex justify-content-end vtctalink m-0">
            <a class="text-primary" id="start-over">Start Over <i class="fa fa-sync-alt"></i></a>
         </div>
      </div>
   </div>
</div>
<script>
  /**
   * The main render function.
   * All of the JavaScript DOM manipulation happens in here.
   */
  function uxResearchToolRender () {
    // List of online resources corresponding to each UX Research Method.
    // Used to display the recommended UX-Research-method cards on the results page.
    const RESEARCH_METHODS = {
      FOCUS_GROUPS: {
        label: 'Focus groups',
        content: [
          {
            link: 'https://www.usability.gov/how-to-and-tools/methods/focus-groups.html',
            name: 'Focus Groups'
          },
          {
            link: 'https://www.linkedin.com/learning/learning-design-research/focus-group?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: Learning Design Research'
          }
        ]
      },
      CONTEXTUAL_INQUIRY: {
        label: 'Contextual Inquiry',
        content: [
          {
            link: 'https://www.usability.gov/how-to-and-tools/methods/contextual-interview.html',
            name: 'Contextual Interview'
          },
          {
            link: 'https://measuringu.com/contextual-inquiry/',
            name: 'The Essentials of a Contextual Inquiry'
          },
        ]
      },
      DIARY_STUDIES: {
        label: 'Diary Studies',
        content: [
          {
            link: 'https://www.nngroup.com/articles/diary-studies/',
            name: 'Diary Studies: Understanding Long-Term User Behavior and Experiences'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-insights-weekly/what-is-a-diary-study?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: What is a Diary Study?'
          }
        ]
      },
      ETHNOGRAPHIC_FIELD_STUDIES: {
        label: 'Ethnographic field studies',
        content: [
          {
            link: 'https://www.nngroup.com/articles/field-studies/',
            name: 'Field Studies'
          },
          {
            link: 'https://www.nngroup.com/videos/4-steps-field-studies/',
            name: '4 Steps to Field Studies with Users'
          },
          {
            link: 'https://measuringu.com/qual-methods/',
            name: '5 Types of Qualitative Methods'
          },
          {
            link: 'https://measuringu.com/observation-role/',
            name: '4 Types of Observational Research'
          },
        ]
      },
      JOURNEY_MAPPING: {
        label: 'Journey Mapping',
        content: [
          {
            link: 'https://www.nngroup.com/articles/journey-mapping-101/',
            name: 'Journey Mapping 101'
          },
          {
            link: 'https://www.nngroup.com/videos/journey-mapping-101/',
            name: 'Customer Journey Mapping 101'
          },
          {
            link: 'https://www.nngroup.com/articles/journey-mapping-faq/?lm=paper-prototyping-101&pt=youtubevideo',
            name: 'Journey Mapping: 9 Frequently Asked Questions'
          },
          {
            link: 'https://www.linkedin.com/learning/customer-experience-journey-mapping?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: Customer Experience Journey Mapping'
          }
        ]
      },
      USER_PERSONAS: {
        label: 'User Personas',
        content: [
          {
            link: 'https://www.nngroup.com/articles/persona/?lm=personas&pt=course',
            name: 'Personas Make Users Memorable for Product Team Members'
          },
          {
            link: 'https://www.usability.gov/how-to-and-tools/methods/personas.html',
            name: 'Personas'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-design-3-creating-personas?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: UX Design: Creating Personas'
          }
        ]
      },
      REMOTE_USER_INTERVIEWS: {
        label: 'Remote User Interviews',
        content: [
          {
            link: 'https://www.nngroup.com/articles/user-interviews/',
            name: 'User Interviews: How, When, and Why to Conduct Them'
          },
          {
            link: 'https://www.nngroup.com/articles/remote-ux/',
            name: 'Remote UX Work: Guidelines and Resources'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-insights-weekly/what-is-a-user-research-interview?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: What is a user research interview?'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-research-methods-interviewing/conducting-interviews?u=57888345',
            name: 'LinkedIn Learning Course: UX Research Methods Interviewing'
          }
        ]
      },
      SURVEYS: {
        label: 'Surveys',
        content: [
          {
            link: 'https://www.usability.gov/how-to-and-tools/methods/online-surveys.html',
            name: 'Online Surveys'
          },
          {
            link: 'https://measuringu.com/cux-surveys/',
            name: '7 Survey Types to Measure the Customer Experience'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-foundations-research/surveys?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: UX Foundations Research - Survey'
          }
        ]
      },
      USER_INTERVIEW: {
        label: 'User Interviews',
        content: [
          {
            link: 'https://www.nngroup.com/articles/user-interviews/',
            name: 'User Interviews: How, When, and Why to Conduct Them'
          },
          {
            link: 'https://www.usability.gov/how-to-and-tools/methods/individual-interviews.html',
            name: 'Individual Interviews'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-research-methods-interviewing?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: UX Research Methods - Interviewing'
          }
        ]
      },
      ANALYTICS: {
        label: 'Analytics',
        content: [
          {
            link: 'https://www.nngroup.com/articles/analytics-reports-ux-strategists/?lm=analytics-and-user-experience&pt=course',
            name: 'Five Essential Analytics Reports for UX Strategists'
          },
          {
            link: 'https://www.nngroup.com/articles/analytics-user-experience/',
            name: 'Three Uses for Analytics in User-Experience Practice'
          },
          {
            link: 'https://www.linkedin.com/learning/learning-web-analytics-2?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: Learning Web Analytics'
          }
        ]
      },
      SUPPORT_CALL_MONITORING: {
        label: 'Support Call Monitoring',
        content: [
          {
            link: 'https://www.twilio.com/learn/contact-center/call-center-analytics',
            name: 'Improve Customer Satisfaction with Call Center Analytics'
          },
          {
            link: 'https://www.nngroup.com/articles/testing-decreased-support/',
            name: 'How Iterative Testing Decreased Support Calls By 70% on Mozilla\'s Support Website'
          },
          {
            link: 'https://www.nngroup.com/articles/customer-service-omnichannel-ux/',
            name: 'Minimize the Need for Customer Service to Improve the Omnichannel UX'
          },
          {
            link: 'https://measuringu.com/customer-service/',
            name: 'Why Do People Call Customer Service?'
          },
        ]
      },
      DESIRABILITY_STUDY: {
        label: 'Desirability Study',
        content: [
          {
            link: 'https://measuringu.com/microsoft-desirability/',
            name: '10 Things to Know About the Microsoft Desirability Toolkit'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-foundations-research/desirability-studies?autoplay=true&trk=learning-course_table-of-contents_video&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-insights-weekly/what-is-a-desirability-study?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning ',
            name: 'LinkedIn Learning Course: What is a desirability study?'
          }
        ]
      },
      FIVE_SECOND_TEST: {
        label: 'Five Second Test',
        content: [
          {
            link: 'https://www.nngroup.com/videos/5-second-usability-test/',
            name: '5-Second Usability Test'
          },
          {
            link: 'https://measuringu.com/five-second-tests/',
            name: 'MeasuringU: 5 Second Usability Tests'
          },
          {
            link: 'https://www.linkedin.com/learning/user-experience-for-web-design/the-five-second-test?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: The Five Second Test'
          }
        ]
      },
      FIRST_CLICK_TEST: {
        label: 'First Click Test',
        content: [
          {
            link: 'https://www.usability.gov/how-to-and-tools/methods/first-click-testing.html',
            name: 'First Click Testing'
          },
          {
            link: 'https://measuringu.com/first-click/',
            name: 'MeasuringU: Getting the First Click Right'
          },
          {
            link: 'https://measuringu.com/first-choice/',
            name: 'MeasuringU: The Importance of the First Choice in Website Navigation'
          }
        ]
      },
      CARD_SORTING: {
        label: 'Card Sorting',
        content: [
          {
            link: 'https://www.nngroup.com/articles/card-sorting-definition/',
            name: 'Card Sorting: Uncover Users\' Mental Models for Better Information Architecture'
          },
          {
            link: 'https://www.usability.gov/how-to-and-tools/methods/card-sorting.html',
            name: 'Card Sorting'
          },
          {
            link: 'https://measuringu.com/card-sorting/',
            name: 'MeasuringU: 10 Things to Know about Card Sorting'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-research-methods-card-sorting?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: UX Research Methods - Card Sorting'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-foundations-information-architecture?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: UX Foundation - Information Architecture'
          }
        ]
      },
      TREE_TESTING: {
        label: 'Tree Testing',
        content: [
          {
            link: 'https://www.nngroup.com/articles/tree-testing/',
            name: 'Tree Testing: Fast, Iterative Evaluation of Menu Labels and Categories'
          },
          {
            link: 'https://www.nngroup.com/articles/interpreting-tree-test-results/',
            name: 'Tree Testing Part 2: Interpreting the Results'
          },
          {
            link: 'https://measuringu.com/tree-testing-ia/',
            name: 'Using Tree-Testing to Test Information Architecture'
          },
          {
            link: 'https://measuringu.com/approach/tree-testing/',
            name: 'Tree Testing'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-research-methods-card-sorting/tree-test-planning?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: Tree Test Planning'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-foundations-information-architecture?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: UX Foundation - Information Architecture'
          }
        ]
      },
      PROTOTYPE_TESTING: {
        label: 'Prototype Testing',
        content: [
          {
            link: 'https://www.nngroup.com/videos/paper-prototyping-101/',
            name: 'Paper Prototyping 101'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-foundations-prototyping-2/testing-and-evaluating-prototypes?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: Testing and Evaluating Prototypes'
          },
          {
            link: 'https://www.linkedin.com/learning/learning-design-research/user-testing-and-rapid-prototyping?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning\n',
            name: 'LinkedIn Learning Course: User Testing and Rapid Prototyping'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-design-6-paper-prototyping/tips-for-user-testing-prototype-interfaces?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: Tips for user testing prototype interfaces'
          }
        ]
      },
      AB_TESTING: {
        label: 'AB Testing',
        content: [
          {
            link: 'https://www.nngroup.com/videos/ab-testing-101/ ',
            name: 'A/B Testing 101'
          },
          {
            link: 'https://measuringu.com/ab-testing/',
            name: '10 THINGS TO KNOW ABOUT A/B TESTING'
          },
          {
            link: 'https://www.linkedin.com/learning-login/continue?account=57888345&forceAccount=false&authModeName=VT+Login&authUUID=7RKblbZQQ2ySxAmwIifGjg%3D%3D&redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fux-foundations-research%2Fmultivariate-testing-and-a-b-testing%3Ftrk%3Dlearning-serp_learning_search-card%26upsellOrderOrigin%3Dhomepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: Multivariate Testing and A/B Testing'
          }
        ]
      },
      ACCESSIBILITY_EVALUATION: {
        label: 'Accessibility Evaluation',
        content: [
          {
            link: 'https://www.w3.org/WAI/test-evaluate/',
            name: 'Evaluating Web Accessibility Overview'
          },
          {
            link: 'https://www.w3.org/WAI/ER/tools/',
            name: 'Web Accessibility Evaluation Tools List'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-foundations-accessibility?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: UX Foundations - Accessibility'
          }
        ]
      },
      // HEAT_MAP: {
      //   label: 'Click Heat Map',
      //   content: [
      //     {
      //       link: 'https://measuringu.com/visualize-behaviors/',
      //       name: 'MeasuringI: 4 Ways to Visualize Website Behavior'
      //     },
      //   ]
      // },
      SEARCH_LOG_ANALYSIS: {
        label: 'Search Log Analysis',
        content: [
          {
            link: 'https://www.nngroup.com/articles/search-log-analysis/',
            name: 'Search-Log Analysis: The Most Overlooked Opportunity in Web UX Research'
          },
        ]
      },
      SOCIAL_MEDIA_MONITORING: {
        label: 'Social Media Monitoring',
        content: [
          {
            link: 'https://www.linkedin.com/learning/learn-social-media-monitoring?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: Learn Social Media Monitoring'
          }
        ]
      },
      WEBSITE_ANALYTICS: {
        label: 'Website Analytics',
        content: [
          {
            link: 'https://www.nngroup.com/articles/analytics-reports-ux-strategists/?lm=analytics-and-user-experience&pt=course',
            name: 'Five Essential Analytics Reports for UX Strategists'
          },
          {
            link: 'https://www.nngroup.com/articles/analytics-user-experience/',
            name: 'Three Uses for Analytics in User-Experience Practice'
          },
          {
            link: 'https://www.linkedin.com/learning/learning-web-analytics-2?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: Learning Web Analytics'
          }
        ]
      },
      USABILITY_STUDY: {
        label: 'Usability Study',
        content: [
          {
            link: 'https://www.usability.gov/how-to-and-tools/methods/usability-testing.html',
            name: 'Usability Testing'
          },
          {
            link: 'https://www.nngroup.com/articles/usability-testing-101/',
            name: 'Usability Testing 101'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-deep-dive-usability-testing?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: UX Deep Dive - Usability Testing'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-foundations-usability-testing?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: UX Foundations - Usability Testing'
          }
        ]
      },
      HEURISTIC_EVALUATION: {
        label: 'Heuristic Evaluation',
        content: [
          {
            link: 'https://www.usability.gov/how-to-and-tools/methods/heuristic-evaluation.html',
            name: 'Heuristic Evaluations and Expert Reviews'
          },
          {
            link: 'https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/',
            name: 'How to Conduct a Heuristic Evaluation'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-insights-weekly/what-is-a-heuristic-evaluation?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: What is a Heuristic Evaluation?'
          },
          {
            link: 'https://www.linkedin.com/learning/ux-foundations-research/expert-reviews-heuristic-reviews?trk=learning-serp_learning_search-card&upsellOrderOrigin=homepage-basic_intent-module-learning',
            name: 'LinkedIn Learning Course: Expert Reviews Heuristic Reviews'
          }
        ]
      },
      INTERCEPT_SURVEYS: {
        label: 'Intercept Surveys',
        content: [
          {
            link: 'https://www.nngroup.com/articles/exit-intent-good-ux/',
            name: '10 Ways to Use Exit-Intent Popups to Improve UX'
          },
        ]
      },
      TRUE_INTENT_TESTING: {
        label: 'True Intent Testing',
        content: [
          {
            link: 'https://measuringu.com/true-intent/',
            name: 'MeasuringU: Measuring Website Visitor\' True Intent',
          },
        ]
      },
    };

    /** List of selectable options for the UX suggestion tool.
     * Each option is unique, thus, allowing us to render corresponding
     * slides based on thee option selected in the previous slide.
     * e.g. "MyUsers --> Generate --> Attitudes" vs. "MyService --> Executing --> Attitudes"
     * These two workflows will generate very different recommendations.
     */
    const OPTIONS = {
      MY_USERS: 'myUsers',
      MY_SERVICE: 'myService',
      GENERATE: 'generate',
      VALIDATE: 'validate',
      STRATEGIZING: 'strategizing',
      EXECUTING: 'executing',
      ASSESSING: 'assessing',
      GENERATE_ATTITUDES: 'generateAttitudes',
      GENERATE_BEHAVIORS: 'generateBehaviors',
      GENERATE_ATTITUDES_AND_BEHAVIORS: 'generateAttitudesAndBehaviors',
      VALIDATE_ATTITUDES: 'validateAttitudes',
      VALIDATE_BEHAVIORS: 'validateBehaviors',
      VALIDATE_ATTITUDES_AND_BEHAVIORS: 'validateAttitudesAndBehaviors',
      STRATEGIZING_ATTITUDES: 'strategizingAttitudes',
      STRATEGIZING_BEHAVIORS: 'strategizingBehaviors',
      EXECUTING_ATTITUDES: 'executingAttitudes',
      EXECUTING_BEHAVIORS: 'executingBehaviors',
      ASSESSING_WHAT: 'assessingWhat',
      ASSESSING_WHY: 'assessingWhy',
    };

    // Selectable options with label.
    const OPTIONS_WITH_TITLE = {
      [OPTIONS.MY_USERS]: 'My Users',
      [OPTIONS.MY_SERVICE]: 'My Service',
      [OPTIONS.GENERATE]: 'Generate new ideas',
      [OPTIONS.VALIDATE]: 'Validate existing ideas',
      [OPTIONS.STRATEGIZING]: 'Strategizing',
      [OPTIONS.EXECUTING]: 'Executing',
      [OPTIONS.ASSESSING]: 'Assessing',
      [OPTIONS.GENERATE_ATTITUDES]: 'Attitudes',
      [OPTIONS.GENERATE_BEHAVIORS]: 'Behaviors',
      [OPTIONS.GENERATE_ATTITUDES_AND_BEHAVIORS]: 'Attitudes & Behaviors',
      [OPTIONS.VALIDATE_ATTITUDES]: 'Attitudes',
      [OPTIONS.VALIDATE_BEHAVIORS]: 'Behaviors',
      [OPTIONS.VALIDATE_ATTITUDES_AND_BEHAVIORS]: 'Attitudes & Behaviors',
      [OPTIONS.STRATEGIZING_ATTITUDES]: 'Attitudes',
      [OPTIONS.STRATEGIZING_BEHAVIORS]: 'Behaviors',
      [OPTIONS.EXECUTING_ATTITUDES]: 'Attitudes',
      [OPTIONS.EXECUTING_BEHAVIORS]: 'Behaviors',
      [OPTIONS.ASSESSING_WHAT]: 'What is happening',
      [OPTIONS.ASSESSING_WHY]: 'Why is it happening',
      REMOTE: 'Remote study',
      IN_PERSON: 'In-person study'
    };

    const SECONDARY_OPTIONS = {
      REMOTE: {
        value: 'REMOTE',
        label: 'Remote study',
        icon: 'fas fa-4x fa-video text-gray',
      },
      IN_PERSON: {
        value: 'IN_PERSON',
        label: 'In-person study',
        icon: 'fas fa-4x fa-user-friends text-gray',
      }
    };

    // The HTML icon tags for the survey slides.
    const ICONS = {
      ATTITUDE: `<i class="fas fa-3x fa-comment-dots text-gray"></i>`,
      BEHAVIOR: `<i class="fas fa-3x fa-mouse text-gray"></i>`,
      ATTITUDE_AND_BEHAVIOR: `<div><i class="fas fa-3x fa-comment-dots text-gray mr-3"></i><i class="fas fa-3x fa-mouse text-gray"></i></div>`
    };

    /** List of UX Research methods and combination of options that generates them.
     *  Each UX Research method has a set of user selectable options inside the "options" array.
     *  The suggestion algorithm will check if the "userSelectedOptions" array is a subset of
     *  the "options" array for each UX Research method. If so, then that UX Research method will be
     *  rendered on the results page.
     */
    const RESEARCH_METHODS_WITH_OPTIONS = [
      {
        name: 'FOCUS_GROUPS',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_USERS, OPTIONS.GENERATE, OPTIONS.GENERATE_ATTITUDES,
          OPTIONS.VALIDATE, OPTIONS.VALIDATE_ATTITUDES,
          OPTIONS.MY_SERVICE, OPTIONS.STRATEGIZING, OPTIONS.STRATEGIZING_ATTITUDES,
          OPTIONS.EXECUTING, OPTIONS.EXECUTING_ATTITUDES]
      },
      {
        name: 'USER_INTERVIEW',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_USERS, OPTIONS.GENERATE, OPTIONS.GENERATE_ATTITUDES,
          OPTIONS.VALIDATE, OPTIONS.VALIDATE_ATTITUDES,
          OPTIONS.MY_SERVICE, OPTIONS.STRATEGIZING, OPTIONS.STRATEGIZING_ATTITUDES,
          OPTIONS.EXECUTING, OPTIONS.EXECUTING_ATTITUDES,
          OPTIONS.ASSESSING, OPTIONS.ASSESSING_WHY
        ]
      },
      {
        name: 'CONTEXTUAL_INQUIRY',
        options: [
          SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_USERS, OPTIONS.GENERATE, OPTIONS.GENERATE_ATTITUDES, OPTIONS.GENERATE_ATTITUDES_AND_BEHAVIORS,
          OPTIONS.MY_SERVICE, OPTIONS.STRATEGIZING, OPTIONS.STRATEGIZING_ATTITUDES, OPTIONS.STRATEGIZING_BEHAVIORS,
        ]
      },
      {
        name: 'DIARY_STUDIES',
        options: [
          SECONDARY_OPTIONS.REMOTE.value,
          OPTIONS.MY_USERS, OPTIONS.GENERATE, OPTIONS.GENERATE_BEHAVIORS, OPTIONS.GENERATE_ATTITUDES_AND_BEHAVIORS,
          OPTIONS.MY_SERVICE, OPTIONS.STRATEGIZING, OPTIONS.STRATEGIZING_BEHAVIORS,
        ]
      },
      {
        name: 'ETHNOGRAPHIC_FIELD_STUDIES',
        options: [
          SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_USERS, OPTIONS.GENERATE, OPTIONS.GENERATE_BEHAVIORS,
        ]
      },
      {
        name: 'JOURNEY_MAPPING',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_USERS, OPTIONS.GENERATE, OPTIONS.GENERATE_ATTITUDES_AND_BEHAVIORS,
          OPTIONS.VALIDATE, OPTIONS.VALIDATE_ATTITUDES_AND_BEHAVIORS,
        ]
      },
      {
        name: 'USER_PERSONAS',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_USERS, OPTIONS.GENERATE, OPTIONS.GENERATE_ATTITUDES_AND_BEHAVIORS,
          OPTIONS.VALIDATE, OPTIONS.VALIDATE_ATTITUDES_AND_BEHAVIORS,
        ]
      },
      {
        name: 'REMOTE_USER_INTERVIEWS',
        options: [
          SECONDARY_OPTIONS.REMOTE.value,
          OPTIONS.MY_USERS, OPTIONS.VALIDATE, OPTIONS.VALIDATE_ATTITUDES,
        ]
      },
      {
        name: 'SURVEYS',
        options: [
          SECONDARY_OPTIONS.REMOTE.value,
          OPTIONS.MY_USERS, OPTIONS.VALIDATE, OPTIONS.VALIDATE_ATTITUDES,
          OPTIONS.MY_SERVICE, OPTIONS.ASSESSING, OPTIONS.ASSESSING_WHY
        ]
      },
      {
        name: 'ANALYTICS',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_USERS, OPTIONS.VALIDATE, OPTIONS.VALIDATE_BEHAVIORS,
        ]
      },
      {
        name: 'SUPPORT_CALL_MONITORING',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_USERS, OPTIONS.VALIDATE, OPTIONS.VALIDATE_BEHAVIORS,
        ]
      },
      {
        name: 'DESIRABILITY_STUDY',
        options: [
          SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_SERVICE, OPTIONS.STRATEGIZING, OPTIONS.STRATEGIZING_ATTITUDES,
        ]
      },

      {
        name: 'FIVE_SECOND_TEST',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_SERVICE, OPTIONS.EXECUTING, OPTIONS.EXECUTING_ATTITUDES,
        ]
      },

      {
        name: 'FIRST_CLICK_TEST',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_SERVICE, OPTIONS.EXECUTING, OPTIONS.EXECUTING_BEHAVIORS,
        ]
      },
      {
        name: 'CARD_SORTING',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_SERVICE, OPTIONS.EXECUTING, OPTIONS.EXECUTING_BEHAVIORS,
        ]
      },

      {
        name: 'TREE_TESTING',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_SERVICE, OPTIONS.EXECUTING, OPTIONS.EXECUTING_BEHAVIORS,
        ]
      },

      {
        name: 'PROTOTYPE_TESTING',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_SERVICE, OPTIONS.EXECUTING, OPTIONS.EXECUTING_BEHAVIORS,
        ]
      },
      {
        name: 'AB_TESTING',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_SERVICE, OPTIONS.ASSESSING, OPTIONS.ASSESSING_WHAT
        ]
      },

      {
        name: 'ACCESSIBILITY_EVALUATION',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_SERVICE, OPTIONS.ASSESSING, OPTIONS.ASSESSING_WHAT
        ]
      },

      // {
      //   name: 'HEAT_MAP',
      //   options: [
      //     SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
      //     OPTIONS.MY_SERVICE, OPTIONS.ASSESSING, OPTIONS.ASSESSING_WHAT
      //   ]
      // },
      {
        name: 'SEARCH_LOG_ANALYSIS',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_SERVICE, OPTIONS.ASSESSING, OPTIONS.ASSESSING_WHAT
        ]
      },

      {
        name: 'SOCIAL_MEDIA_MONITORING',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_SERVICE, OPTIONS.ASSESSING, OPTIONS.ASSESSING_WHAT
        ]
      },

      {
        name: 'WEBSITE_ANALYTICS',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_SERVICE, OPTIONS.ASSESSING, OPTIONS.ASSESSING_WHAT
        ]
      },
      {
        name: 'USABILITY_STUDY',
        options: [
          SECONDARY_OPTIONS.REMOTE.value, SECONDARY_OPTIONS.IN_PERSON.value,
          OPTIONS.MY_SERVICE, OPTIONS.ASSESSING, OPTIONS.ASSESSING_WHY
        ]
      },

      {
        name: 'HEURISTIC_EVALUATION',
        options: [
          SECONDARY_OPTIONS.REMOTE.value,
          OPTIONS.MY_SERVICE, OPTIONS.ASSESSING, OPTIONS.ASSESSING_WHY
        ]
      },

      {
        name: 'INTERCEPT_SURVEYS',
        options: [
          SECONDARY_OPTIONS.REMOTE.value,
          OPTIONS.MY_SERVICE, OPTIONS.ASSESSING, OPTIONS.ASSESSING_WHY
        ]
      },

      {
        name: 'TRUE_INTENT_TESTING',
        options: [
          SECONDARY_OPTIONS.REMOTE.value,
          OPTIONS.MY_SERVICE, OPTIONS.ASSESSING, OPTIONS.ASSESSING_WHY
        ]
      },
    ];

    const SLIDE_1 = {
      title: 'I want to learn about',
      type: 'radio',
      options: [
        {
          mainText: 'My Users',
          subText: `their needs, goals, behaviors, habits, frustrations, pain points, etc.`,
          icon: 'fas fa-4x fa-users text-gray',
          value: OPTIONS.MY_USERS
        },
        {
          mainText: 'My Service',
          subText: 'how my product performs when placed in front of a user.',
          icon: 'fas fa-4x fa-cogs text-gray',
          value: OPTIONS.MY_SERVICE
        }
      ]
    };

    /** JS object that has all the information needed to generate 2nd survey slide.
     * Based on the option value the user selects for SLIDE_1, we use the corresponding object
     * that helps render the 2nd slide (e.g. If the user selects "MY_USERS" on slide 1, then we will
     * return SLIDE_2[selectedOption] with "selectedOption" being "OPTIONS.MY_USERS".
     */
    const SLIDE_2 = {
      [OPTIONS.MY_USERS]: {
        title: 'I want to',
        type: 'radio',
        options: [
          {
            mainText: 'Generate new ideas',
            subText: 'gain insight about who your users really are and their experiences and use that insight to come up with new features and services',
            value: OPTIONS.GENERATE,
            icon: 'fas fa-4x fa-rocket text-gray',
          },
          {
            mainText: 'Validate existing ideas',
            subText: `find out if your ideas are valid <br/><br/><br/><br/>`,
            value: OPTIONS.VALIDATE,
            icon: 'fas fa-4x fa-clipboard-check text-gray',
          }
        ]
      },
      [OPTIONS.MY_SERVICE]: {
        title: 'I am in the phase of',
        type: 'radio',
        options: [
          {
            mainText: 'Strategizing',
            subText: 'I am designing a new service/feature',
            value: OPTIONS.STRATEGIZING,
            icon: 'fas fa-3x fa-chess text-gray',
          },
          {
            mainText: 'Executing',
            subText: 'I want to test a new service/feature',
            value: OPTIONS.EXECUTING,
            icon: 'fas fa-3x fa-flask text-gray',
          },
          {
            mainText: 'Assessing',
            subText: 'My service is available for use',
            value: OPTIONS.ASSESSING,
            icon: 'fas fa-3x fa-search text-gray',
          }
        ]
      }
    };

    /**
     * JS object that has all the information needed to generate 3rd survey slide.
     * NOTE: the HTML line break tags (i.e. "<br>") in "subText" field are used to align
     * the check box for all option cards.
     */
    const SLIDE_3 = {
      [OPTIONS.GENERATE]: {
        title: 'I am interested in',
        type: 'radio',
        options: [
          {
            mainText: 'Attitudes',
            subText: 'what my users say<br/><br/><br/><br/>',
            value: OPTIONS.GENERATE_ATTITUDES,
            icon: ICONS.ATTITUDE,
          },
          {
            mainText: 'Behaviors',
            subText: 'what my users do<br/><br/><br/><br/>',
            value: OPTIONS.GENERATE_BEHAVIORS,
            icon: ICONS.BEHAVIOR,
          },
          {
            mainText: 'Attitudes & Behaviors',
            subText: 'what my users say and do',
            value: OPTIONS.GENERATE_ATTITUDES_AND_BEHAVIORS,
            icon: ICONS.ATTITUDE_AND_BEHAVIOR,
          }
        ]
      },
      [OPTIONS.VALIDATE]: {
        title: 'I am interested in',
        type: 'radio',
        options: [
          {
            mainText: 'Attitudes',
            subText: 'what my users say',
            value: OPTIONS.VALIDATE_ATTITUDES,
            icon: ICONS.ATTITUDE,
          },
          {
            mainText: 'Behaviors',
            subText: 'what my users do',
            value: OPTIONS.VALIDATE_BEHAVIORS,
            icon: ICONS.BEHAVIOR,
          },
          {
            mainText: 'Attitudes & Behaviors',
            subText: 'what my users say and do',
            value: OPTIONS.VALIDATE_ATTITUDES_AND_BEHAVIORS,
            icon: ICONS.ATTITUDE_AND_BEHAVIOR,
          }
        ]
      },
      [OPTIONS.STRATEGIZING]: {
        title: 'I am interested in',
        type: 'radio',
        options: [
          {
            mainText: 'Attitudes',
            subText: 'What my users think about the new service/feature',
            value: OPTIONS.STRATEGIZING_ATTITUDES,
            icon: ICONS.ATTITUDE,
          },
          {
            mainText: 'Behaviors',
            subText: 'How my users would use the new service/feature',
            value: OPTIONS.STRATEGIZING_BEHAVIORS,
            icon: ICONS.BEHAVIOR,
          },
        ]
      },
      [OPTIONS.EXECUTING]: {
        title: 'I am interested in',
        type: 'radio',
        options: [
          {
            mainText: 'Attitudes',
            subText: 'What my users say about the new service/feature',
            value: OPTIONS.EXECUTING_ATTITUDES,
            icon: ICONS.ATTITUDE,
          },
          {
            mainText: 'Behaviors',
            subText: 'How my users use the new service/feature',
            value: OPTIONS.EXECUTING_BEHAVIORS,
            icon: ICONS.BEHAVIOR,
          },
        ]
      },
      [OPTIONS.ASSESSING]: {
        title: 'I am interested in',
        type: 'radio',
        options: [
          {
            mainText: 'What is happening',
            subText: 'how much, how many',
            value: OPTIONS.ASSESSING_WHAT,
            icon: '<i class="fas fa-4x fa-chart-line text-gray"></i>',
          },
          {
            mainText: 'Why is it happening',
            subText: 'how to fix it',
            value: OPTIONS.ASSESSING_WHY,
            icon: '<i class="fas fa-4x fa-wrench text-gray"></i>',
          },
        ]
      },
    };

    // JS object that has all the information needed to generate 3rd survey slide.
    const SLIDE_4 = {
      [OPTIONS.GENERATE_ATTITUDES]: {
        title: 'I want to conduct',
        type: 'radio',
        options: {
          [SECONDARY_OPTIONS.REMOTE.value]: {
            mainText: SECONDARY_OPTIONS.REMOTE.label,
            value: SECONDARY_OPTIONS.REMOTE.value,
            results: [RESEARCH_METHODS.FOCUS_GROUPS],
            icon: SECONDARY_OPTIONS.REMOTE.icon,
          },
          [SECONDARY_OPTIONS.IN_PERSON.value]: {
            mainText: SECONDARY_OPTIONS.IN_PERSON.label,
            value: SECONDARY_OPTIONS.IN_PERSON.value,
            results: [RESEARCH_METHODS.FOCUS_GROUPS,
              RESEARCH_METHODS.CONTEXTUAL_INQUIRY],
            icon: SECONDARY_OPTIONS.IN_PERSON.icon,
          }
        },
      },
      [OPTIONS.GENERATE_BEHAVIORS]: {
        title: 'I want to conduct',
        type: 'radio',
        options: {
          [SECONDARY_OPTIONS.REMOTE.value]: {
            mainText: SECONDARY_OPTIONS.REMOTE.label,
            value: SECONDARY_OPTIONS.REMOTE.value,
            results: [RESEARCH_METHODS.DIARY_STUDIES],
            icon: SECONDARY_OPTIONS.REMOTE.icon,
          },
          [SECONDARY_OPTIONS.IN_PERSON.value]: {
            mainText: SECONDARY_OPTIONS.IN_PERSON.label,
            value: SECONDARY_OPTIONS.IN_PERSON.value,
            results: [RESEARCH_METHODS.ETHNOGRAPHIC_FIELD_STUDIES],
            icon: SECONDARY_OPTIONS.IN_PERSON.icon,
          }
        },
      },
      [OPTIONS.GENERATE_ATTITUDES_AND_BEHAVIORS]: {
        title: 'I want to conduct',
        type: 'radio',
        options: {
          [SECONDARY_OPTIONS.REMOTE.value]: {
            mainText: SECONDARY_OPTIONS.REMOTE.label,
            value: SECONDARY_OPTIONS.REMOTE.value,
            results: [RESEARCH_METHODS.DIARY_STUDIES, RESEARCH_METHODS.JOURNEY_MAPPING,
              RESEARCH_METHODS.USER_PERSONAS],
            icon: SECONDARY_OPTIONS.REMOTE.icon,
          },
          [SECONDARY_OPTIONS.IN_PERSON.value]: {
            mainText: SECONDARY_OPTIONS.IN_PERSON.label,
            value: SECONDARY_OPTIONS.IN_PERSON.value,
            results: [RESEARCH_METHODS.CONTEXTUAL_INQUIRY, RESEARCH_METHODS.JOURNEY_MAPPING,
              RESEARCH_METHODS.USER_PERSONAS],
            icon: SECONDARY_OPTIONS.IN_PERSON.icon,
          }
        },
      },
      [OPTIONS.VALIDATE_ATTITUDES]: {
        title: 'I want to conduct',
        type: 'radio',
        options: {
          [SECONDARY_OPTIONS.REMOTE.value]: {
            mainText: SECONDARY_OPTIONS.REMOTE.label,
            value: SECONDARY_OPTIONS.REMOTE.value,
            results: [RESEARCH_METHODS.REMOTE_USER_INTERVIEWS,
              RESEARCH_METHODS.FOCUS_GROUPS,
              RESEARCH_METHODS.SURVEYS],
            icon: SECONDARY_OPTIONS.REMOTE.icon,
          },
          [SECONDARY_OPTIONS.IN_PERSON.value]: {
            mainText: SECONDARY_OPTIONS.IN_PERSON.label,
            value: SECONDARY_OPTIONS.IN_PERSON.value,
            results: [RESEARCH_METHODS.USER_INTERVIEW, RESEARCH_METHODS.FOCUS_GROUPS,
              RESEARCH_METHODS.SURVEYS],
            icon: SECONDARY_OPTIONS.IN_PERSON.icon,
          }
        },
      },
      [OPTIONS.VALIDATE_BEHAVIORS]: {
        title: 'I want to conduct',
        type: 'radio',
        options: {
          [SECONDARY_OPTIONS.REMOTE.value]: {
            mainText: SECONDARY_OPTIONS.REMOTE.label,
            value: SECONDARY_OPTIONS.REMOTE.value,
            results: [RESEARCH_METHODS.ANALYTICS,
              RESEARCH_METHODS.SUPPORT_CALL_MONITORING],
            icon: SECONDARY_OPTIONS.REMOTE.icon,
          },
          [SECONDARY_OPTIONS.IN_PERSON.value]: {
            mainText: SECONDARY_OPTIONS.IN_PERSON.label,
            value: SECONDARY_OPTIONS.IN_PERSON.value,
            results: [RESEARCH_METHODS.ANALYTICS,
              RESEARCH_METHODS.SUPPORT_CALL_MONITORING],
            icon: SECONDARY_OPTIONS.IN_PERSON.icon,
          }
        },
      },
      [OPTIONS.VALIDATE_ATTITUDES_AND_BEHAVIORS]: {
        title: 'I want to conduct',
        type: 'radio',
        options: {
          [SECONDARY_OPTIONS.REMOTE.value]: {
            mainText: SECONDARY_OPTIONS.REMOTE.label,
            value: SECONDARY_OPTIONS.REMOTE.value,
            results: [RESEARCH_METHODS.JOURNEY_MAPPING, RESEARCH_METHODS.USER_PERSONAS],
            icon: SECONDARY_OPTIONS.REMOTE.icon,
          },
          [SECONDARY_OPTIONS.IN_PERSON.value]: {
            mainText: SECONDARY_OPTIONS.IN_PERSON.label,
            value: SECONDARY_OPTIONS.IN_PERSON.value,
            results: [RESEARCH_METHODS.JOURNEY_MAPPING, RESEARCH_METHODS.USER_PERSONAS],
            icon: SECONDARY_OPTIONS.IN_PERSON.icon,
          }
        },
      },
      [OPTIONS.STRATEGIZING_ATTITUDES]: {
        title: 'I want to conduct',
        type: 'radio',
        options: {
          [SECONDARY_OPTIONS.REMOTE.value]: {
            mainText: SECONDARY_OPTIONS.REMOTE.label,
            value: SECONDARY_OPTIONS.REMOTE.value,
            results: [RESEARCH_METHODS.FOCUS_GROUPS],
            icon: SECONDARY_OPTIONS.REMOTE.icon,
          },
          [SECONDARY_OPTIONS.IN_PERSON.value]: {
            mainText: SECONDARY_OPTIONS.IN_PERSON.label,
            value: SECONDARY_OPTIONS.IN_PERSON.value,
            results: [RESEARCH_METHODS.CONTEXTUAL_INQUIRY,
              RESEARCH_METHODS.DESIRABILITY_STUDY, RESEARCH_METHODS.FOCUS_GROUPS],
            icon: SECONDARY_OPTIONS.IN_PERSON.icon,
          }
        },
      },
      [OPTIONS.STRATEGIZING_BEHAVIORS]: {
        title: 'I want to conduct',
        type: 'radio',
        options: {
          [SECONDARY_OPTIONS.REMOTE.value]: {
            mainText: SECONDARY_OPTIONS.REMOTE.label,
            value: SECONDARY_OPTIONS.REMOTE.value,
            results: [RESEARCH_METHODS.DIARY_STUDIES],
            icon: SECONDARY_OPTIONS.REMOTE.icon,
          },
          [SECONDARY_OPTIONS.IN_PERSON.value]: {
            mainText: SECONDARY_OPTIONS.IN_PERSON.label,
            value: SECONDARY_OPTIONS.IN_PERSON.value,
            results: [RESEARCH_METHODS.CONTEXTUAL_INQUIRY],
            icon: SECONDARY_OPTIONS.IN_PERSON.icon,
          }
        },
      },
      [OPTIONS.EXECUTING_ATTITUDES]: {
        title: 'I want to conduct',
        type: 'radio',
        options: {
          [SECONDARY_OPTIONS.REMOTE.value]: {
            mainText: SECONDARY_OPTIONS.REMOTE.label,
            value: SECONDARY_OPTIONS.REMOTE.value,
            results: [RESEARCH_METHODS.FIVE_SECOND_TEST, RESEARCH_METHODS.FOCUS_GROUPS],
            icon: SECONDARY_OPTIONS.REMOTE.icon,
          },
          [SECONDARY_OPTIONS.IN_PERSON.value]: {
            mainText: SECONDARY_OPTIONS.IN_PERSON.label,
            value: SECONDARY_OPTIONS.IN_PERSON.value,
            results: [RESEARCH_METHODS.FIVE_SECOND_TEST, RESEARCH_METHODS.FOCUS_GROUPS],
            icon: SECONDARY_OPTIONS.IN_PERSON.icon,
          }
        },
      },
      [OPTIONS.EXECUTING_BEHAVIORS]: {
        title: 'I want to conduct',
        type: 'radio',
        options: {
          [SECONDARY_OPTIONS.REMOTE.value]: {
            mainText: SECONDARY_OPTIONS.REMOTE.label,
            value: SECONDARY_OPTIONS.REMOTE.value,
            results: [RESEARCH_METHODS.FIRST_CLICK_TEST, RESEARCH_METHODS.CARD_SORTING,
              RESEARCH_METHODS.TREE_TESTING, RESEARCH_METHODS.PROTOTYPE_TESTING],
            icon: SECONDARY_OPTIONS.REMOTE.icon,
          },
          [SECONDARY_OPTIONS.IN_PERSON.value]: {
            mainText: SECONDARY_OPTIONS.IN_PERSON.label,
            value: SECONDARY_OPTIONS.IN_PERSON.value,
            results: [RESEARCH_METHODS.FIRST_CLICK_TEST, RESEARCH_METHODS.CARD_SORTING,
              RESEARCH_METHODS.TREE_TESTING, RESEARCH_METHODS.PROTOTYPE_TESTING],
            icon: SECONDARY_OPTIONS.IN_PERSON.icon,
          }
        },
      },
      [OPTIONS.ASSESSING_WHAT]: {
        title: 'I want to conduct',
        type: 'radio',
        options: {
          [SECONDARY_OPTIONS.REMOTE.value]: {
            mainText: SECONDARY_OPTIONS.REMOTE.label,
            value: SECONDARY_OPTIONS.REMOTE.value,
            results: [RESEARCH_METHODS.AB_TESTING,
              RESEARCH_METHODS.ACCESSIBILITY_EVALUATION,
              RESEARCH_METHODS.FIRST_CLICK_TEST,
              RESEARCH_METHODS.SEARCH_LOG_ANALYSIS,
              RESEARCH_METHODS.SOCIAL_MEDIA_MONITORING,
              RESEARCH_METHODS.WEBSITE_ANALYTICS],
            icon: SECONDARY_OPTIONS.REMOTE.icon,
          },
          [SECONDARY_OPTIONS.IN_PERSON.value]: {
            mainText: SECONDARY_OPTIONS.IN_PERSON.label,
            value: SECONDARY_OPTIONS.IN_PERSON.value,
            results: [RESEARCH_METHODS.AB_TESTING,
              RESEARCH_METHODS.ACCESSIBILITY_EVALUATION,
              RESEARCH_METHODS.FIRST_CLICK_TEST,
              RESEARCH_METHODS.SEARCH_LOG_ANALYSIS,
              RESEARCH_METHODS.SOCIAL_MEDIA_MONITORING,
              RESEARCH_METHODS.WEBSITE_ANALYTICS],
            icon: SECONDARY_OPTIONS.IN_PERSON.icon,
          }
        },
      },
      [OPTIONS.ASSESSING_WHY]: {
        title: 'I want to conduct',
        type: 'radio',
        options: {
          [SECONDARY_OPTIONS.REMOTE.value]: {
            mainText: SECONDARY_OPTIONS.REMOTE.label,
            value: SECONDARY_OPTIONS.REMOTE.value,
            results: [RESEARCH_METHODS.USABILITY_STUDY,
              RESEARCH_METHODS.HEURISTIC_EVALUATION,
              RESEARCH_METHODS.SURVEYS,
              RESEARCH_METHODS.INTERCEPT_SURVEYS, RESEARCH_METHODS.TRUE_INTENT_TESTING],
            icon: SECONDARY_OPTIONS.REMOTE.icon,
          },
          [SECONDARY_OPTIONS.IN_PERSON.value]: {
            mainText: SECONDARY_OPTIONS.IN_PERSON.label,
            value: SECONDARY_OPTIONS.IN_PERSON.value,
            results: [RESEARCH_METHODS.USABILITY_STUDY],
            icon: SECONDARY_OPTIONS.IN_PERSON.icon,
          }
        },
      },
    };

    // Holds all the options the user has selected so far.
    let userSelectedOptions = [];

    /** Used to backup the "userSelectedOptions" before "submitting" the survey.
     * If the user changes their survey response on the results page, then "modifies their response",
     * we need to show their old survey response so we can generate correct recommendations.
     * Currently, it is not possible to sync the response selected in the results page with the response
     * selected in the survey slides.
     */
    let userSelectedOptionsOld = [];

    /**
     * Set the "visibility" property of a DOM element.
     * @param elementId id of the DOM element.
     * @param isVisible boolean value that determines visibility property of the given element.
     */
    const setVisibility = (elementId, isVisible) => {
      const element = document.getElementById(elementId);
      if(element) {
        element.style.visibility = isVisible ? 'visible' : 'hidden';
      }
    };

    /**
     * Set the "display" property of a DOM element.
     * @param elementId id of the DOM element.
     * @param display boolean value that determines display property of the given element.
     */
    const setDisplay = (elementId, display) => {
      const element = document.getElementById(elementId)
        if(element) {
          element.style.display = display ? 'block' : 'none';
        }
    };

    /**
     * Generates a list of suggested UX Research methods.
     * The suggestion algorithm will check if the "userSelectedOptions" array is a subset of
     * the "options" array for each UX Research method. If so, then that UX Research method will be
     * rendered on the results page.
     */
    const getFinalResult = () => {
      return RESEARCH_METHODS_WITH_OPTIONS.reduce((result, method) => {
        if (userSelectedOptions.every(option => method.options.includes(option))) {
          result.push(method.name);
        }
        return result;
      }, []);
    };

    /**
     * Gets the radio value selected for the given survey slide.
     * @param name name of the radio element (e.g. "SLIDE_1")
     */
    const getRadioVal = (name) => {
      const ele = document.getElementsByName(name);
      if (!ele) return null;

      for (let i = 0; i < ele.length; i++) {
        if (ele[i].checked) {
          return ele[i].value;
        }
      }

      return null; // if no value is selected
    };

    /**
     * Render the 2nd slide.
     * This function is called when the user selects an option on slide 1.
     */
    function buildSlide2 () {

      setVisibility('SLIDE1_Next', true);
      setDisplay('selected-option-div', true);
      setVisibility('my-results', true);

      const selectedOption = getRadioVal('SLIDE_1');
      userSelectedOptions[0] = selectedOption;

      const selectedOptionDiv = document.getElementById('selected-option-1');
      const mainText = SLIDE_1.title + ': ';

      const options = SLIDE_1.options.map(option => {
        const isSelected = option.value === selectedOption;
        return `<span class="badge badge-pill py-2 px-3 my-1 mr-2 ${isSelected ? 'badge-primary'
          : 'badge-light'}" style="font-size: 70%; background-color: ${isSelected ? 'var(--vt-burntOrange)'
          : ''}">${option.mainText}</span>`;
      });
      selectedOptionDiv.innerHTML =
        `<strong style="float: left; width: 215px; clear: both">${mainText}</strong><span>${options.join('')}</span>`;

      const answers = SLIDE_2[selectedOption].options.map(option => {
        return `<div class="radio-item col mx-2 p-0">
      <input class="surveyInput" type="radio" id="SLIDE2_${option.value}" name="SLIDE_2" value="${option.value}">
      <label style="max-width: 350px" for="SLIDE2_${option.value}">
         <div  style="text-align: center" class="mb-3"><i class="${option.icon}"></i></div>
         <h4 style="text-align: center">${option.mainText}</h4>
         <p>${option.subText}</p>
         <div class="select-button" style="margin: 0 auto;">
            <svg viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg" svg-inline="" role="presentation" focusable="false" tabindex="-1" class="fill-current icon-12 text-white" style="display: none" >
               <path d="M11.568.284a1.184 1.184 0 00-1.69.157l-5.31 6.501-2.703-1.838a1.185 1.185 0 00-1.664.34A1.24 1.24 0 00.534 7.14l4.497 3.06 6.691-8.193a1.242 1.242 0 00-.154-1.724z"></path>
            </svg>
         </div>
      </label>
   </div>`;
      });

      slide2Div.innerHTML = `<div id="SLIDE_2">
            <div id="top-heading">
              <div class="question d-flex align-content-center justify-content-center mb-4">
                 <h2 class="d-inline mx-4 mb-0">${SLIDE_2[selectedOption].title}</h2>
               </div>
            </div>
            <div class="answers">
              <section class="row">
                  ${answers.join('')}
              </section>
            </div>
      <div class="text-center mt-3 d-flex justify-content-between">
      <button class="bg-primary p-2 px-3 m-0 costume-btn" id="SLIDE2_Prev"><i class="fa fa-arrow-left"></i></button>
      <button class="bg-primary p-2 px-3 m-0 costume-btn" style="visibility: hidden" id="SLIDE2_Next"><i class="fa fa-arrow-right"></i></button>
      </div>

      </div>`;

      // Slide 2 buttons
      document.getElementById('SLIDE2_Prev').addEventListener('click', function () {
        showPreviousSlide();
      });

      document.getElementById('SLIDE2_Next').addEventListener('click', function () {
        showNextSlide();
      });

      setRadioOnClick('SLIDE_2', buildSlide3);

    }

    // Render slide 1.
    const buildSlide1 = () => {

      const answers = SLIDE_1.options.map(option => {
        return `<div class="radio-item col">
      <input class="surveyInput" type="radio" id="SLIDE1_${option.value}" name="SLIDE_1" value="${option.value}">
      <label style="max-width: 350px; display: flex; flex-direction: column; justify-content: space-between;" for="SLIDE1_${option.value}">
      <div>
      <div  style="text-align: center" class="mb-3"><i class="${option.icon}"></i></div>
      <h4 style="text-align: center">${option.mainText}</h4>
      <p>${option.subText}</p>
      </div>
      <div style="display: flex; justify-content: center">
      <div class="select-button">
      <svg viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg" svg-inline="" role="presentation" focusable="false" tabindex="-1" class="fill-current icon-12 text-white" style="display: none" >
      <path d="M11.568.284a1.184 1.184 0 00-1.69.157l-5.31 6.501-2.703-1.838a1.185 1.185 0 00-1.664.34A1.24 1.24 0 00.534 7.14l4.497 3.06 6.691-8.193a1.242 1.242 0 00-.154-1.724z"></path>
      </svg>
      </div>
      </div>

      </label>
      </div>`;
      });

      slide1Div.innerHTML = `<div id="SLIDE_1">
      <div id="top-heading">
      <div class="question d-flex align-content-center justify-content-center mb-4">
      <h2 class="d-inline mr-4 mb-0">${SLIDE_1.title}</h2>
      </div>
      </div>
      <div class="answers">
      <section class="row">
      ${answers.join('')}
      </section>
      </div>
      <div class="text-center mt-3 d-flex justify-content-between">
      <button class="bg-primary p-2 px-3 m-0 costume-btn" style="visibility: hidden"><i class="fa fa-arrow-left"></i></button>
      <button class="bg-primary p-2 px-3 m-0 costume-btn" style="visibility: hidden" id="SLIDE1_Next"><i class="fa fa-arrow-right"></i></button>
      </div>
      </div>`;

      // Slide 1 Buttons
      document.getElementById('SLIDE1_Next').addEventListener('click', function () {
        showNextSlide();
      });

      setRadioOnClick('SLIDE_1', buildSlide2);

    };

    /**
     * Binds the "buildSlide#" function to radio options for each slide.
     * If the selected option is either "validateBehaviors" or "assessingWhat",
     * then render the results page right away instead of rendering the 4th slide.
     * @param name
     * @param buildFunc
     */
    const setRadioOnClick = (name, buildFunc) => {
      const radios = document.getElementsByName(name);
      for (let i = 0, max = radios.length; i < max; i++) {
        const radioVal = radios[i].value;
        if (radioVal === 'validateBehaviors' || radioVal === 'assessingWhat') {
          console.log({ radioVal });
          radios[i].onclick = slide3PreResults;

        } else {
          radios[i].onclick = buildFunc;
        }

      }

    };

    // Renders the results page after doing some clean-ups that are specific to slide 3.
    const slide3PreResults = () => {
      setVisibility('SLIDE3_Next', true);
      const selectedOption = getRadioVal('SLIDE_3');
      userSelectedOptions[2] = selectedOption;
      // generate selected option for slide 3
      generateSlide3SelectedOptDiv(selectedOption);
      // generate the results page
      buildResult();
      // set the "next" button to go to the results page (e.g. "SLIDE3_NEXT")
      document.getElementById('SLIDE3_Next').addEventListener('click', () => {
        setDisplay('selected-option-div', false);
        // Backup the userSelectedOptions since we're about to visit the results page.
        userSelectedOptionsOld = [...userSelectedOptions];
        setVisibility('my-results', false);
        showSlide(5);
      });
    };

    const generateSlide3SelectedOptDiv = (selectedOption) => {
      const selectedOptionSlide2 = getRadioVal('SLIDE_2');

      const selectedOptionDiv = document.getElementById('selected-option-3');

      const mainText = SLIDE_3[selectedOptionSlide2].title + ': ';
      const options = SLIDE_3[selectedOptionSlide2].options.map(option => {
        const isSelected = option.value === selectedOption;
        return `<span class="badge badge-pill py-2 px-3 my-1 mr-2 ${isSelected ? 'badge-primary'
          : 'badge-light'}" style="font-size: 70%; background-color: ${isSelected ? 'var(--vt-burntOrange)'
          : ''}">${option.mainText}</span>`;
      });
      selectedOptionDiv.innerHTML =
        `<strong style="float: left; width: 215px; clear: both">${mainText}</strong><span>${options.join('')}</span>`;
    };

    /**
     * Clears the selected option section.
     */
    const clearSelectedOptions = () => {
      const selectOptionDivs = document.querySelectorAll('.selected-option');
      selectOptionDivs.forEach(option => option.innerHTML = '');
    };

    // Render slide 3.
    const buildSlide3 = () => {
      setVisibility('SLIDE2_Next', true);
      // document.getElementById('step-3').classList.remove('disabled-progress');

      const selectedOption = getRadioVal('SLIDE_2');
      userSelectedOptions[1] = selectedOption;
      const selectedOptionSlide1 = getRadioVal('SLIDE_1');

      const selectedOptionDiv = document.getElementById('selected-option-2');
      const mainText = SLIDE_2[selectedOptionSlide1].title + ': ';
      const options = SLIDE_2[selectedOptionSlide1].options.map(option => {
        const isSelected = option.value === selectedOption;
        return `<span class="badge badge-pill py-2 px-3 my-1 mr-2 ${isSelected ? 'badge-primary'
          : 'badge-light'}" style="font-size: 70%; background-color: ${isSelected ? 'var(--vt-burntOrange)'
          : ''}">${option.mainText}</span>`;
      });
      selectedOptionDiv.innerHTML =
        `<strong style="float: left; width: 215px; clear: both">${mainText}</strong><span>${options.join('')}</span>`;

      const answers = SLIDE_3[selectedOption].options.map(option => {
        return `<div class="radio-item col">
      <input class="surveyInput" type="radio" id="SLIDE3_${option.value}" name="SLIDE_3" value="${option.value}">
      <label style="max-width: 350px" for="SLIDE3_${option.value}">
      <div  style="text-align: center" class="mb-3">${option.icon}</div>
      <h4 style="text-align: center">${option.mainText}</h4>
      <p>${option.subText}</p>
      <div class="select-button" style="margin: 0 auto;">
      <svg viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg" svg-inline="" role="presentation" focusable="false" tabindex="-1" class="fill-current icon-12 text-white" style="display: none" >
      <path d="M11.568.284a1.184 1.184 0 00-1.69.157l-5.31 6.501-2.703-1.838a1.185 1.185 0 00-1.664.34A1.24 1.24 0 00.534 7.14l4.497 3.06 6.691-8.193a1.242 1.242 0 00-.154-1.724z"></path>
      </svg>
      </div>
      </label>
      </div>`;
      });

      slide3Div.innerHTML = `<div id="SLIDE_3">
      <div id="top-heading">

      <div class="question d-flex align-content-center justify-content-center mb-4">
      <h2 class="d-inline mx-4 mb-0">${SLIDE_3[selectedOption].title}</h2>
      </div>
      </div>
      <div class="answers">
      <section class="row">
      ${answers.join('')}
      </section>
      </div>
      <div class="text-center mt-3 d-flex justify-content-between">
      <button class="bg-primary p-2 px-3 m-0 costume-btn" id="SLIDE3_Prev"><i class="fa fa-arrow-left"></i></button>
      <button class="bg-primary p-2 px-3 m-0 costume-btn" style="visibility: hidden" id="SLIDE3_Next"><i class="fa fa-arrow-right"></i></button>
      </div>
      </div>`;

      // Slide 3 buttons
      document.getElementById('SLIDE3_Prev').addEventListener('click', function () {
        showPreviousSlide();
      });

      document.getElementById('SLIDE3_Next').addEventListener('click', function () {
        showNextSlide();
      });

      setRadioOnClick('SLIDE_3', buildSlide4);
    };

    let final_slide_option;

    // Render slide 4.
    const buildSlide4 = () => {
      setVisibility('SLIDE3_Next', true);

      const selectedOption = getRadioVal('SLIDE_3');
      userSelectedOptions[2] = selectedOption;

      const selectedOptionSlide2 = getRadioVal('SLIDE_2');

      const selectedOptionDiv = document.getElementById('selected-option-3');

      const mainText = SLIDE_3[selectedOptionSlide2].title + ': ';
      const options = SLIDE_3[selectedOptionSlide2].options.map(option => {
        const isSelected = option.value === selectedOption;
        return `<span class="badge badge-pill py-2 px-3 my-1 mr-2 ${isSelected ? 'badge-primary'
          : 'badge-light'}" style="font-size: 70%; background-color: ${isSelected ? 'var(--vt-burntOrange)'
          : ''}">${option.mainText}</span>`;
      });
      selectedOptionDiv.innerHTML =
        `<strong style="float: left; width: 215px; clear: both">${mainText}</strong><span>${options.join('')}</span>`;

      final_slide_option = selectedOption;

      const answers = Object.entries(SLIDE_4[selectedOption].options).map(option => {
        return `<div class="radio-item col">
      <input class="surveyInput" type="radio" id="SLIDE4_${option[1].value}" name="SLIDE_4" value="${option[1].value}">
      <label style="max-width: 350px; height: 10rem" for="SLIDE4_${option[1].value}">
      <div  style="text-align: center" class="mb-3"><i class="${option[1].icon}"></i></div>
      <h4 style="text-align: center">${option[1].mainText}</h4>
      <div class="select-button" style="margin: 0 auto;">
      <svg viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg" svg-inline="" role="presentation" focusable="false" tabindex="-1" class="fill-current icon-12 text-white" style="display: none" >
      <path d="M11.568.284a1.184 1.184 0 00-1.69.157l-5.31 6.501-2.703-1.838a1.185 1.185 0 00-1.664.34A1.24 1.24 0 00.534 7.14l4.497 3.06 6.691-8.193a1.242 1.242 0 00-.154-1.724z"></path>
      </svg>
      </div>
      </label>
      </div>`;
      });

      slide4Div.innerHTML = `<div id="SLIDE_4">
      <div id="top-heading">
      <div class="question d-flex align-content-center justify-content-center mb-4">
      <h2 class="d-inline mx-4 mb-0">${SLIDE_4[selectedOption].title}</h2>
      </div>
      </div>
      <div class="answers">
      <section class="row">
      ${answers.join('')}
      </section>
      </div>

      <div class="text-center mt-3 d-flex justify-content-between">
      <button class="bg-primary p-2 px-3 m-0 costume-btn" id="SLIDE4_Prev"><i class="fa fa-arrow-left"></i></button>
      <button class="bg-primary p-2 px-3 m-0 costume-btn" style="visibility: hidden" id="SLIDE4_Submit">Submit</button>
      </div>
      </div>`;

      // Slide 3 buttons
      document.getElementById('SLIDE4_Prev').addEventListener('click', function () {
        setVisibility('my-results', true);
        setVisibility('SLIDE4_Submit', false);

        showPreviousSlide();
      });

      document.getElementById('SLIDE4_Submit').addEventListener('click', function () {

        userSelectedOptionsOld = [...userSelectedOptions];
        buildResult();

        setDisplay('selected-option-div', false);
        setVisibility('my-results', false);
        showNextSlide();
      });

      setRadioOnClick('SLIDE_4', preBuildResult);

    };

    // JS object that maps selectable option to corresponding question.
    // E.g. MY_USERS --> "I want to learn about"
    const optionToQuestion = {
      [OPTIONS.MY_USERS]: {
        level: 0,
        question: 'I want to learn about',
        otherOptions: [OPTIONS.MY_SERVICE]
      },
      [OPTIONS.MY_SERVICE]: {
        level: 0,
        question: 'I want to learn about',
        otherOptions: [OPTIONS.MY_USERS]
      },
      [OPTIONS.GENERATE]: {
        level: 1,
        question: 'I want to',
        otherOptions: [OPTIONS.VALIDATE]
      },
      [OPTIONS.VALIDATE]: {
        level: 1,
        question: 'I want to',
        otherOptions: [OPTIONS.GENERATE]
      },
      [OPTIONS.STRATEGIZING]: {
        level: 1,
        question: 'I am in the phase of',
        otherOptions: [OPTIONS.EXECUTING, OPTIONS.ASSESSING]
      },
      [OPTIONS.EXECUTING]: {
        level: 1,
        question: 'I am in the phase of',
        otherOptions: [OPTIONS.STRATEGIZING, OPTIONS.ASSESSING]
      },
      [OPTIONS.ASSESSING]: {
        level: 1,
        question: 'I am in the phase of',
        otherOptions: [OPTIONS.STRATEGIZING, OPTIONS.EXECUTING]
      },
      [OPTIONS.GENERATE_ATTITUDES]: {
        level: 2,
        question: 'I am interested in',
        otherOptions: [OPTIONS.GENERATE_BEHAVIORS, OPTIONS.GENERATE_ATTITUDES_AND_BEHAVIORS]
      },
      [OPTIONS.GENERATE_BEHAVIORS]: {
        level: 2,
        question: 'I am interested in',
        otherOptions: [OPTIONS.GENERATE_ATTITUDES, OPTIONS.GENERATE_ATTITUDES_AND_BEHAVIORS]
      },
      [OPTIONS.GENERATE_ATTITUDES_AND_BEHAVIORS]: {
        level: 2,
        question: 'I am interested in',
        otherOptions: [OPTIONS.GENERATE_BEHAVIORS, OPTIONS.GENERATE_ATTITUDES]
      },
      [OPTIONS.VALIDATE_ATTITUDES]: {
        level: 2,
        question: 'I am interested in',
        otherOptions: [OPTIONS.VALIDATE_BEHAVIORS, OPTIONS.VALIDATE_ATTITUDES_AND_BEHAVIORS]
      },
      [OPTIONS.VALIDATE_BEHAVIORS]: {
        level: 2,
        question: 'I am interested in',
        otherOptions: [OPTIONS.VALIDATE_ATTITUDES, OPTIONS.VALIDATE_ATTITUDES_AND_BEHAVIORS]
      },
      [OPTIONS.VALIDATE_ATTITUDES_AND_BEHAVIORS]: {
        level: 2,
        question: 'I am interested in',
        otherOptions: [OPTIONS.VALIDATE_BEHAVIORS, OPTIONS.VALIDATE_ATTITUDES]
      },
      [OPTIONS.STRATEGIZING_ATTITUDES]: {
        level: 2,
        question: 'I am interested in',
        otherOptions: [OPTIONS.STRATEGIZING_BEHAVIORS]
      },
      [OPTIONS.STRATEGIZING_BEHAVIORS]: {
        level: 2,
        question: 'I am interested in',
        otherOptions: [OPTIONS.STRATEGIZING_ATTITUDES]
      },
      [OPTIONS.EXECUTING_ATTITUDES]: {
        level: 2,
        question: 'I am interested in',
        otherOptions: [OPTIONS.EXECUTING_BEHAVIORS]
      },
      [OPTIONS.EXECUTING_BEHAVIORS]: {
        level: 2,
        question: 'I am interested in',
        otherOptions: [OPTIONS.EXECUTING_ATTITUDES]
      },
      [OPTIONS.ASSESSING_WHAT]: {
        level: 2,
        question: 'I am interested in',
        otherOptions: [OPTIONS.ASSESSING_WHY]
      },
      [OPTIONS.ASSESSING_WHY]: {
        level: 2,
        question: 'I am interested in',
        otherOptions: [OPTIONS.ASSESSING_WHAT]
      },
      [SECONDARY_OPTIONS.REMOTE.value]: {
        level: 3,
        question: 'I want to conduct',
        otherOptions: [SECONDARY_OPTIONS.IN_PERSON.value]
      },
      [SECONDARY_OPTIONS.IN_PERSON.value]: {
        level: 3,
        question: 'I want to conduct',
        otherOptions: [SECONDARY_OPTIONS.REMOTE.value]
      }
    };

    // Generate question and other available options based on selected option.
    const generateSelectedOptions = () => {
      const options = userSelectedOptions.map((opt, index) => {
        const { question, otherOptions, level } = optionToQuestion[opt];

        const questionDiv = `<strong style="float: left; width: 215px; clear: both">${question}: </strong>`;
        const selectedOption = `<button data-selected="true" data-level="${level}" data-optionVal="${opt}" class="select-opt level-${level} badge badge-pill py-2 px-3 my-1 mr-2" style="font-size: 70%;">${OPTIONS_WITH_TITLE[opt]}</button>`;
        const otherOptionsDiv = otherOptions.map(otherOpt => {
          return `<button data-selected="false" data-level="${level}" data-optionVal="${otherOpt}" class="select-opt level-${level} badge badge-pill py-2 px-3 my-1 mr-2" style="font-size: 70%;">${OPTIONS_WITH_TITLE[otherOpt]}</button>`;
        });
        return `<div id="results-option-${index}">${questionDiv}<span>${selectedOption}${otherOptionsDiv.join(
          '')}</span></div>`;

      });

      return options.join('');
    };

    /**
     * Perform some pre-processing stuff before rendering the results page.
     */
    const preBuildResult = () => {
      setVisibility('SLIDE4_Submit', true);

      const selectedOption = getRadioVal('SLIDE_4');
      if (selectedOption) {
        userSelectedOptions[3] = selectedOption;
      }

      const selectedOptionDiv = document.getElementById('selected-option-4');

      if (final_slide_option && selectedOption) {
        const mainText = SLIDE_4[final_slide_option].title + ': ';
        const options = Object.values(SECONDARY_OPTIONS).map(option => {
          const isSelected = option.value === selectedOption;
          return `<span class="badge badge-pill py-2 px-3 my-1 mr-2 ${isSelected ? 'badge-primary'
            : 'badge-light'}" style="font-size: 70%; background-color: ${isSelected ? 'var(--vt-burntOrange)'
            : ''}">${option.label}</span>`;
        });
        selectedOptionDiv.innerHTML =
          `<strong style="float: left; width: 215px; clear: both">${mainText}</strong><span>${options.join('')}</span>`;
      }

    };

    // Render the results page.
    const buildResult = () => {
      const res = getFinalResult();
      const recItems = res.map(
        (rec) => {
          let method = RESEARCH_METHODS[rec];

          return `<div class="card mb-3 mr-3 p-4" style="width: 100%">
      <h4 class="mb-2 text-secondary">${method.label}</h4>
      ${method.content.map(item => {
            return `<p style="font-size: 0.9em" class="mb-0"><a class="custom-link" target="_blank" href="${item.link}">${item.name}</a></p>`;
          }).join('')
          }
      </div>`;
        });

      const selectionDiv = generateSelectedOptions();

      resultDiv.innerHTML = `<div id="selectedOptionsResultsPage">${selectionDiv}</div><div class="mt-4">
      <h4 class="mb-5">UX Research Methods we are recommending:</h4>
      <div id="result-recs" style="display: flex;flex-wrap: wrap;justify-content: start;">
      ${recItems.join('')}
      </div>
      <div class="text-center row">
      <div class="col-sm-5 col-12">
      <a class="text-primary" id="SLIDE5_Update">Modify My Response <i class="fa fa-edit"></i></a>
      </div>
      <div class="col-sm-4 col-12">
      <a class="text-primary" id="SLIDE5_Retake">Start Over <i class="fa fa-sync-alt"></i></a>
      </div>
      </div>


      </div>`;

      // add event listeners to options on the results page
      const allOptions = document.querySelectorAll('button.select-opt');
      allOptions.forEach(opt => {
        opt.addEventListener('click', () => {
          const { optionval, level } = opt.dataset;

          removeOptionsAtLevel(level);
          opt.dataset.selected = 'true';

          addOrRemoveOptionAtLvl4(optionval, level);
          updateSelectedOptAtLevel(optionval, level);
        });
      });

      const addOrRemoveOptionAtLvl4 = (optionVal, level) => {
        const level4Option = document.getElementById('results-option-3');
        if (optionVal === 'validateBehaviors' || optionVal === 'assessingWhat') {
          // remove level 4 options
          if (level4Option) {
            level4Option.remove();
          }

        } else if (level !== '3' && !level4Option) {// if not remote or in-person
          const newLevel4 = document.createElement('div');
          newLevel4.setAttribute('id', 'results-option-3');
          const selectedOptionsResultsPage = document.getElementById('selectedOptionsResultsPage');
          selectedOptionsResultsPage.appendChild(newLevel4);
          document.getElementById('results-option-3').innerHTML =
            `<strong style="float: left; width: 215px; clear: both">I want to conduct: </strong><span><button data-selected="true" data-level="3" data-optionval="REMOTE" class="select-opt level-3 badge badge-pill py-2 px-3 my-1 mr-2" style="font-size: 70%;">Remote study</button><button data-selected="false" data-level="3" data-optionval="IN_PERSON" class="select-opt level-3 badge badge-pill py-2 px-3 my-1 mr-2" style="font-size: 70%;">In-person study</button></span>`;
          userSelectedOptions[3] = 'REMOTE';
          // Need to add event listeners here again
          const optionsAtLevel = document.querySelectorAll('button.select-opt.level-3');
          optionsAtLevel.forEach(opt => {
            opt.addEventListener('click', () => {
              const { optionval, level } = opt.dataset;
              removeOptionsAtLevel(level);
              opt.dataset.selected = 'true';
              updateSelectedOptAtLevel(optionval, level);

            });
          });
        }
      };

      const removeOptionsAtLevel = (level) => {
        const allTags = document.querySelectorAll(`button.select-opt.level-${level}`);
        allTags.forEach(tag => tag.dataset.selected = 'false');
      };

      const updateSelectedOptAtLevel = (newOption, levelStr) => {
        const level = parseInt(levelStr);
        console.log({ newOption, level });

        if (level === 0) { // My Users, My Service
          // select a default option choice for level 1 and 2
          generateNewOptions(newOption, level);
          generateNewOptions(userSelectedOptions[level + 1], level + 1);
          selectDefaultOptionLvl3();

        } else if (level === 1) {
          // Generate & Validate only differ in their option value, not the text and the question.
          // Need to update the level 2 options UI
          // How can we map selected option in level 1 to level 2 questions and options? --> Use SLIDE_3
          generateNewOptions(newOption, level);
          selectDefaultOptionLvl3();
        } else if (level === 2) {
          userSelectedOptions[level] = newOption;
          selectDefaultOptionLvl3();

        } else { // level 2 or 3
          // simply update the userSelectedOptions at provided level; don't change the UI
          userSelectedOptions[level] = newOption;
        }
        if (userSelectedOptions.includes('validateBehaviors') || userSelectedOptions.includes('assessingWhat')) {
          // remove selection 4
          addOrRemoveOptionAtLvl4('validateBehaviors', 2);
        } else {
          // add selection 4
          addOrRemoveOptionAtLvl4('anything', 2);

        }

        updateRecItems();
      };

      // selects the first level 3 option (e.g. REMOTE or IN-PERSON)
      const selectDefaultOptionLvl3 = () => {
        const options = document.querySelectorAll(`button.select-opt.level-3`);
        // un-highlight all the options at level 3
        // high
        options.forEach((opt, idx) => {
          if (idx === 0) {
            opt.dataset.selected = 'true';
            userSelectedOptions[3] = opt.dataset.optionval;

          } else {
            opt.dataset.selected = 'false';

          }
        });

        console.log({ userSelectedOptions });

      };

      /**
       * Generate the next question with options on the results page.
       * @param newOption: the newly selected option in the level above
       * @param level: the level above
       */
      const generateNewOptions = (newOption, level) => {
        // level = 1 --> SLIDE 3
        // level = 0 --> SLIDE 2
        const obj = level === 1 ? SLIDE_3[newOption] : SLIDE_2[newOption];
        const question = obj.title;
        const options = obj.options.map(opt => ({
          title: opt.mainText,
          value: opt.value
        }));
        const optLevel = level + 1;

        const resultsOptDiv = document.getElementById(`results-option-${optLevel}`);

        const questionDiv = `<strong style="float: left; width: 215px; clear: both">${question}: </strong>`;
        const optionsDiv = options.map((opt, index) => {
          return `<button data-selected="${index === 0 ? 'true'
            : 'false'}" data-level="${optLevel}" data-optionVal="${opt.value}" class="select-opt level-${optLevel} badge badge-pill py-2 px-3 my-1 mr-2" style="font-size: 70%;">${opt.title}</button>`;
        });

        resultsOptDiv.innerHTML = `${questionDiv}<span>${optionsDiv.join('')}</span>`;

        // Need to add event listeners here again
        const optionsAtLevel = document.querySelectorAll(`button.select-opt.level-${optLevel}`);
        optionsAtLevel.forEach(opt => {
          opt.addEventListener('click', () => {
            const { optionval, level } = opt.dataset;
            removeOptionsAtLevel(level);
            opt.dataset.selected = 'true';
            updateSelectedOptAtLevel(optionval, level);

          });
        });

        // update userSelectedOptions
        userSelectedOptions[level] = newOption;
        userSelectedOptions[optLevel] = options[0].value;

      };

      const updateRecItems = () => {
        const res = getFinalResult();
        const recItems = res.map(
          (rec) => {
            let method = RESEARCH_METHODS[rec];

            return `<div class="card mb-3 mr-3 p-4" style="width: 100%">
      <h4 class="mb-2 text-secondary">${method.label}</h4>
      ${method.content.map(item => {
              return `<p style="font-size: 0.9em" class="mb-0"><a class="custom-link" target="_blank" href="${item.link}">${item.name}</a></p>`;
            }).join('')
            }
      </div>`;
          });

        document.getElementById('result-recs').innerHTML = `${recItems.join('')}`;

      };

      document.getElementById('SLIDE5_Update').addEventListener('click', function () {
        setDisplay('selected-option-div', true);
        setVisibility('my-results', true);
        userSelectedOptions = [...userSelectedOptionsOld];

        showSlide(userSelectedOptions.length);
      });

      document.getElementById('SLIDE5_Retake').addEventListener('click', function () {
        setDisplay('selected-option-div', true);
        retakeSurvey();
      });
    };

    /**
     *  Sets the form to its initial state by clearing everything.
     */
    const retakeSurvey = () => {
      userSelectedOptions = [];
      clearSelectedOptions();
      const inputs = document.querySelectorAll('.surveyInput');
      inputs.forEach((inp) => {
        if (inp.type === 'checkbox' || inp.type === 'radio') {
          inp.checked = false;
        }
      });
      showSlide(1);

      // hide "next" buttons on each slide
      setVisibility('SLIDE1_Next', false);
      setVisibility('SLIDE2_Next', false);
      setVisibility('SLIDE3_Next', false);
      setVisibility('SLIDE4_Next', false);
    };

    /**
     * Navigate to the given slide.
     * @param n the given slide number (e.g. 1 through 5)
     */
    const showSlide = (n) => {
      const quizContainer = document.querySelector('.quiz-container');
      if (n === 5) {
        setDisplay('slide5Div', true);
        quizContainer.style.display = 'none';
      } else {
        quizContainer.style.display = 'block';
        setDisplay('slide5Div', false);
      }

      document.getElementById(`slide${currentSlide}Div`).classList.remove('active-slide');
      document.getElementById(`slide${n}Div`).classList.add('active-slide');
      currentSlide = n;
    };

    /**
     * Navigate to the next slide.
     */
    const showNextSlide = () => {
      if (currentSlide !== 4) {
        setDisplay(`selected-option-${currentSlide + 1}`, true);
        document.getElementById(`selected-option-${currentSlide + 1}`).innerHTML = '';
      }

      showSlide(currentSlide + 1);
    };

    /**
     * Navigate to the previous slide.
     */
    const showPreviousSlide = () => {
      const inputs = document.getElementsByName(`SLIDE_${currentSlide}`);
      userSelectedOptions.splice(currentSlide - 1, 1);
      inputs.forEach((inp) => {
        if (inp.type === 'checkbox' || inp.type === 'radio') {
          inp.checked = false;
        }
      });

      setDisplay(`selected-option-${currentSlide}`, false);
      if (currentSlide !== 4) {
        setVisibility(`SLIDE${currentSlide}_Next`, false);
      }
      document.getElementById(`selected-option-${currentSlide}`).innerHTML = '';

      showSlide(currentSlide - 1);
    };

    // Variables
    const slide1Div = document.getElementById('slide1Div');
    const slide2Div = document.getElementById('slide2Div');
    const slide3Div = document.getElementById('slide3Div');
    const slide4Div = document.getElementById('slide4Div');
    const resultDiv = document.getElementById('slide5Div');

    const startOver = document.getElementById('start-over');
    startOver.addEventListener('click', () => {
      setDisplay('selected-option-div', false);
      retakeSurvey();
    });

    // Kick things off
    buildSlide1();

    // Pagination
    let currentSlide = 1;

    // Show the first slide
    showSlide(currentSlide);
  }

    uxResearchToolRender();
</script>