WorkingForm_NoSheet.html

<!-- Note from Aneesh:  -->
<!-- Right now printing to Console (Ctrl-F console.log) -->
<!-- Can change this to instead print on a screen/store easily -->

<form id="survey-form" action="">
    <div id = "container">
    <h1 id="title">Product Finder</h1>
    <div id="description">Answer the 4 questions below, and we will recommend a Mighty Well Product and blog posts just for you!</div>
  
    <!-- ------------------Gender---------------------------- -->
    <div class = "tab">
      <h3 class= "number"> - 1 - </h3>
      <h2 class = "question"> What is your gender? </h2><br>
      <div class="inputContainer">
      <p>
          <span class = "radio"><input type="radio" name="gender" value="male" >Male<br></span>
          <span class = "radio"><input type="radio" name="gender" value="female">Female<br></span>
          <span class = "radio"><input type="radio" name="gender" value="other">Other</span>
        </p>
      </div>
    </div>
  
      <!-- ------------------Medical Condition-------------------------------- -->
    <div class = "tab">
        <h3 class = "number"> - 2 - </h3>
        <h2 class = "question"> Select all that apply to you! </h2> <br>
        <label class = "checkbox-label">
          <p>
          <ul>
           <li><input type="checkbox" name="medcon" value="aplasticAnemia">Aplastic Anemia<br></li>
           <li><input type="checkbox" name="medcon" value="behcets">Behcet's Syndrome<br></li>
           <li><input type="checkbox" name="medcon" value="caps">CAPS<br></li>
            <li><input type="checkbox" name="medcon" value="cysticFibrosis" >Cystic Fibrosis<br></li>
            <li><input type="checkbox" name="medcon" value="diabetes" >Diabetes<br></li>
            <li><input type="checkbox" name="medcon" value="dysautonomia">Dysautonomia<br></li>
            <li><input type="checkbox" name="medcon" value="eds">Ehlers-Danlos Syndrome (EDS)<br></li>
            <li><input type="checkbox" name="medcon" value="fibromyalgia">Fibromyalgia<br></li>
            <li><input type="checkbox" name="medcon" value="gp" >Gastroparesis (GP)<br></li>
            <li><input type="checkbox" name="medcon" value="hrt" >HRT<br></li>
            <li><input type="checkbox" name="medcon" value="lyme" >Lyme Disease<br></li>
            <li><input type="checkbox" name="medcon" value="marfan" >Marfan Syndrome<br></li>
            <li><input type="checkbox" name="medcon" value="mcas" >MCAS<br></li>
            <li><input type="checkbox" name="medcon" value="osteomyelitis">Osteomyelitis<br></li>
            <!--<li><input type="checkbox" name="medcon" value="partialEmptySella">Partial Empty Sella<br></li>-->
            <li><input type="checkbox" name="medcon" value="polyarthralgia">Polyarthralgia<br></li>
            <li><input type="checkbox" name="medcon" value="pcos" >Polycystic Ovary Syndrome (PCOS)<br></li>
            <li><input type="checkbox" name="medcon" value="pots" >Postural Orthostatic Tachycardia Syndrome (POTS)<br></li>
            <!-- <li><input type="checkbox" name="medcon" value="thyroidcancer" >Thyroid Cancer<br></li> -->
            <li><input type="checkbox" name="medcon" value="uc" >Ulcerative Colitis (UC)<br></li>
            <li><input type="checkbox" name="medcon" value="other" >Other<br></li>
            </ul>
          </p>
          </label>
    </div>
    <!-- ------------------Medical Devices-------------------------------- -->
    <div class="tab">
        <h3 class="number"> - 3 - </h3>
        <h2 class="question"> What medical devices do you use?</h2><br>
        <label class = "checkbox-label">
        <span class="checkbox-custom">
          <p>
          <ul>
            <!--<input type="checkbox" name="meddev" value="diabeticPumps">Diabetic Pumps<br>-->
            <li><input type="checkbox" name="meddev" value="EpiPen (Allergies)">EpiPen<br></li>
            <li><input type="checkbox" name="meddev" value="Diabetic Supplies">Diabetic Supplies<br></li>
            <!--input <input type="checkbox" name="meddev" value="hickmanLines">Hickman Lines (CVCs)<br> -->
            <!-- <input type="checkbox" name="meddev" value="inhalers">Inhalers<br> -->
            <li><input type="checkbox" name="meddev" value="Mastectomy Drains">Mastectomy Drains<br></li>
            <li><input type="checkbox" name="meddev" value="midlines">Midlines<br></li>
            <li> <input type="checkbox" name="meddev" value="Peripheral I.V.s">Peripheral IVs<br></li>
            <li><input type="checkbox" name="meddev" value="PICC Lines">PICC Lines<br></li>
            <li><input type="checkbox" name="meddev" value="pills and Other Medications">Pills and Other Medications<br></li>
            <li><input type="checkbox" name="meddev" value="Port">Port<br></li>
            <!-- <input type="checkbox" name="meddev" value="vitamins">Vitamins<br> -->
            <li><input type="checkbox" name="meddev" value="Wheelchairs/Mobility Aids">Wheelchairs/Mobility Aids<br></li>
            <li><input type="checkbox" name="meddev" value="other">Other<br></li>
            </ul>
          </p>
        </span>
        </label>
    </div>
  
  
    <!-- -----------------Use Case--------------------------------- -->
  
    <div class="tab">
        <h3 class="number"> - 4 - </h3>
        <h2 class="question"> What are you looking to use Mighty Well products for? </h2><br>
        <label class = "checkbox-label">
        <span class="checkbox-custom">
          <p>
          <ul>
            <li><input type="checkbox" name="usecase" value="antibioticInfusion">Antibiotic Infusion<br></li>
            <li><input type="checkbox" name="usecase" value="chemotherapy">Chemotherapy<br></li>
            <li><input type="checkbox" name="usecase" value="glucoseMonitoring">Glucose Monitoring<br></li>
            <li><input type="checkbox" name="usecase" value="holdMedicalSupplies">Hold Medical Supplies/Items<br></li>
            <li><input type="checkbox" name="usecase" value="IVInfusion">IV Infusion<br></li>
            <li><input type="checkbox" name="usecase" value="lookingGood">Looking Good/Feeling Proud!<br></li>
            <li><input type="checkbox" name="usecase" value="organizeMedications">Organize Medications<br></li>
            <li><input type="checkbox" name="usecase" value="raisingAwareness">Raising Awareness<br></li>
            <li><input type="checkbox" name="usecase" value="salineTreatment">Saline Treatment<br></li>
            <li><input type="checkbox" name="usecase" value="subcutaneousInjection">Subcutaneous Injection<br></li>
            <li><input type="checkbox" name="usecase" value="TPNInjection">TPN Injection<br></li>
            <li><input type="checkbox" name="usecase" value="transfusion">Transfusion<br></li>
            <li><input type="checkbox" name="usecase" value="tubeFeeding">Tube Feeding<br></li>
            <li><input type="checkbox" name="usecase" value="other">Other<br></li>
          </ul>
          </p>
        </span>
        </label>
    </div>
  
    <div class="tab" id="productRecContainer">
      <h1>Your Results!</h1>
      <h3>Enjoy these Mighty Well products and specially curated blog posts just for you!</h3>
      <a href="" class = "productLink">
      <h2 id="productName" style="float: left;"> Product Name </h2><br>
      <img src="https://bit.ly/2SEVDwz" id= "productPicture" alt = "Product Picture">
      </a>
  
      <a href = "" class="blogLink">
      <h2 id="blogName" style="float: right;"></h2><br>
      <img src="" id="blogPicture" alt = "blog Picture" style="float: right;">
      </a>
  
    </div>
  
    <div style="overflow:auto;">
        <div style = "float:left;"></div>
            <p id="demo"></p>
            <div style = "text-align: center;">
            <button class ="formBtn" type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
            <button class ="formBtn" type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
            <button class ="formBtn" type="button" id="startOverBtn" onclick="location.reload()">Start Over</button>
            <button class = "formBtn" type="submit" id="finalsub" onclick="nextPrev(1)" form="survey-form" value="Submit">Get Your Results!</button>
        </div>
    </div>
    <!-- Circles which indicates the steps of the form: -->
    <div style="text-align:center;margin-top:40px;">
        <span class="step"></span>
        <span class="step"></span>
        <span class="step"></span>
        <span class="step"></span>
    </div>
  </div>
</form>
  
    <style>
        ul {
          columns: 300px;
          list-style: none; 
        }
  
        p{
          margin:0 10px 0 10px;
          display: inline-block;
          text-align:left;
        }
  
        #regForm {
            background-color: #ffffff;
            margin: 100px auto;
            padding: 40px;
            width: 70%;
            min-width: 300px;
        }
  
        #container{
          background-color:#edf9fc;
          padding:100px;
        }
  
        #title{
          margin-left:auto;
          margin-right:auto;
          text-align: center;
          font-size:35px;
        }
  
        #description {
          text-align: center;
          padding:10px;
          max-width:400px;
          margin-left:auto;
          margin-right:auto;
          font: Lato;
          font-size: 14px;
          color: grey;
      }
  
        #productRecContainer{
          background-color:#ffffff;
          padding:100px;
        }
  
        #productPicture{
          padding: 20px;
          max-width: 40%;
          height: auto;
        }
  
        .radio{
          background-color: white;
          padding: 7px;
        }
  
        ul.checkbox  {
          margin-left: auto;
          background-color: color;
          margin-right:auto;
          list-style: none;
          }
  
        li{
          background-color: white;
          padding: 7px;
        }
  
        ul.checkbox li {
          border: 1px black;
          float: left;
          min-width: 400px;
        }
  
        .number {
            text-align: center;
        }
  
        .question{
            text-align: center;
            padding-top: 10px;
        }
  
        .inputContainer{
         text-align : center;
        }
  
        .formBtn{
           width: 10em;
           height: 2.2em;
           text-align: center;
           color: white;
           text-align:center;
           background-color: black;
        }
  
        /* Style the input fields */
  
        input {
            text-align: center;
            font-size: 17px;
            font-family: Raleway;
            padding-bottom: 20px;
        }
  
        /* Mark input boxes that gets an error on validation: */
        input.invalid {
            background-color: #ffdddd;
        }
  
        /* Hide all steps by default: */
        .tab {
            display: none;
        }
  
        /* Make circles that indicate the steps of the form: */
        .step {
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbbbbb;
            border: none;
            border-radius: 50%;
            display: inline-block;
            opacity: 0.5;
        }
  
        /* Mark the active step: */
        .step.active {
            opacity: 1;
        }
  
        /* Mark the steps that are finished and valid: */
        .step.finish {
            background-color: #4CAF50;
        }
    </style>
    <!------------------SCRIPT---------------------------->
  
    <script>
        const CATALOG ={
          "PICC Perfect": ["https://mighty-well.com/products/picc-line-cover-piccperfect-mighty-well?_pos=5&_sid=db99fc554&_ss=r", "https://blog.mighty-well.com/2017/07/adapting-to-the-picc-life/"],
          "Med Planner":  ["https://mighty-well.com/collections/all/products/mighty-medplanner-medical-organizer","https://blog.mighty-well.com/2019/06/trying-out-the-mighty-medplanner-your-new-medical-organizer/"],
          "Mighty Pack": ["https://mighty-well.com/collections/all/products/medical-iv-infusion-backpack-for-patients","https://blog.mighty-well.com/2018/12/travel-without-worries-with-the-mighty-pack-the-best-backpack-for-friends-in-the-fight/"],
          "Mighty Wrap": ["https://mighty-well.com/collections/all/products/the-mighty-jacket","https://blog.mighty-well.com/2017/06/learning-to-love-your-tube/"],
          "Undefeated Wear":["https://mighty-well.com/collections/all/products/undefeated-t-shirt-heather-gray","https://blog.mighty-well.com/2019/11/mighty-well-fall-photoshoot/"]
        }
  
        const scriptURL = "https://script.google.com/macros/s/AKfycbxx4_QDeXS7AqXlU9WkYvDTvdY_dYHUMbZ-YdQK4SslU54ihug/exec"
        const form = document.forms[0]
  
        form.addEventListener("submit", e => {
            e.preventDefault()
            fetch(scriptURL, {
                method: "POST",
                body: new FormData(form)
                })
                .then(response => console.log("Success!", response))
                .catch(error => console.error("Error!", error.message))
            })
  
        var currentTab = 0; // Current tab is set to be the first tab (0)
        var productRec = "";
        showTab(currentTab); // Display the current tab
  
        function showTab(n) {
            // This function will display the specified tab of the form ...
            var x = document.getElementsByClassName("tab");
            x[n].style.display = "block";
            // ... and fix the Previous/Next buttons:
            if(n == x.length-1){
              document.getElementById("prevBtn").style.display = "none";
              document.getElementById("nextBtn").style.display = "none";
              document.getElementById("finalsub").style.display = "none";
              document.getElementById("startOverBtn").style.display="inline";
            }
            else{
            document.getElementById("startOverBtn").style.display="none";
  
            if (n == 0) {
                document.getElementById("prevBtn").style.display = "none";
            } else {
                document.getElementById("prevBtn").style.display = "inline";
            }
            if (n == (x.length - 2)) {
                document.getElementById("finalsub").style.display = "inline";
                document.getElementById("nextBtn").style.display = "none";
            } else {
                document.getElementById("nextBtn").style.display = "inline";
                document.getElementById("finalsub").style.display = "none";

            }}
            // ... and run a function that displays the correct step indicator:
            fixStepIndicator(n)
        }
  
        function nextPrev(n) {
            // This function will figure out which tab to display
            var x = document.getElementsByClassName("tab");
            // Exit the function if any field in the current tab is invalid:
            if (n == 1 && !validateForm()) return false;
            // Hide the current tab:
            x[currentTab].style.display = "none";
            // Increase or decrease the current tab by 1:
            currentTab = currentTab + n;
            // if you have reached the end of the form... :
            if (currentTab >= x.length) {
                //...the form gets submitted:
                document.getElementById("demo").innerHTML = "check";
                //document.getElementById("survey-form").submit();
                return false;
            }
  
            if(currentTab>=x.length-2){ // Last question page
                //document.getElementById("nextBtn").onclick = function() {calculateProduct();}
                
                //const result = await calculateProduct();
                getProductInfo();
               
            }
            // Otherwise, display the correct tab:
            showTab(currentTab);
        }
  
        function validateForm() {
            // This function deals with validation of the form fields
            var x, y, i, valid = true;
            x = document.getElementsByClassName("tab");
            y = x[currentTab].getElementsByTagName("input");
            if (valid) {
                document.getElementsByClassName("step")[currentTab].className += " finish";
            }
            return valid; // return the valid status
        }
  
        function fixStepIndicator(n) {
            // This function removes the "active" class of all steps...
            var i, x = document.getElementsByClassName("step");
            for (i = 0; i < x.length+1; i++) {
                x[i].className = x[i].className.replace(" active", "");
            }
            //... and adds the "active" class to the current step:
            x[n].className += " active";
        }
  
        function calculateProduct() {
            var deviceChecks = document.getElementsByName("meddev");
            var deviceUsed;
            for (i = 0; i < deviceChecks.length; i++) {
                // If a field is empty...
                if (deviceChecks[i].checked) {
                    deviceUsed = deviceChecks[i].value;
                    console.log("Device used:" + deviceUsed);
                   // document.getElementById("demo").innerHTML = "Device used: " + deviceUsed;
                }
            }
  
            // https://api.jsonbin.io/b/5eb23bd48284f36af7b645fc
            let req = new XMLHttpRequest();
  
            req.onreadystatechange = () => {
                if (req.readyState == XMLHttpRequest.DONE) {
                    var jsonData = JSON.parse(req.responseText);
  
                    console.log("Recommended devices: "+ jsonData[deviceUsed])
                    console.log("All jSON Data: " + req.responseText);
                    productRec = jsonData[deviceUsed];
                }
            };
  
            req.open("GET", "https://api.jsonbin.io/b/5eb23bd48284f36af7b645fc/1", true);
            req.send();

            return new Promise(resolve => {
                setTimeout(() => {
                    resolve('resolved');
                }, 2000);
            });
        }
  
          async function getProductInfo(){
          var result = await calculateProduct();
          console.log(result);

          let productURLs = CATALOG[productRec];
          console.log(productURLs);
          let productName =productURLs[0]; //  TODO: take url and extract name text referring to product name
          console.log(productName);
          let productPicture =productURLs[0]; //  TODO: take url and extract src referring to product photo
          let blogName = productURLs[1]; //  TODO: take url and extract name text referring to blog name
          let blogPicture = productURLs[1]; //  TODO: take url and extract src referring to blog photo
          //document.querySelectorAll("productLink").setAttribute("href", recProduct[0]);
          //document.getElementById("productName").innerText = productName;
          //document.getElementById("productPicture").setAttribute("src", productPicture);
        }
  
  
    </script>