neck-question.html

<!DOCTYPE html>
<html>
<head>
	<title>Neck Questions</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" type="text/css" href="assets/css/common.css"> -->
    <link rel="stylesheet" type="text/css" href="assets/css/neck-question.css">
    <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
</head>
<body>
    <!-- header section start -->
    <header>
        <div class="header_top">
            <img class="back" src="assets/images/back.png">
            <p>Health Check Questionnaire</p>
            <img class="close" src="assets/images/close.png">
        </div>
        <div class="header_footer">
            <div class="real_or"></div>
        </div>
    </header>
    <!-- main section  -->
    <main class="main container">
        <div class="main_content">
            <div class="question_content">
                <div class="flex-1">
                    <div>
                        <p>How would you describe your pain?</p>
                        <p>Select all that apply.</p>
                    </div>
                    <div>
                        <div class="grid-1">
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q11111.png">
                                <p>Sharp</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q12.png">
                                <p>Dull</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q13.png">
                                <p>Intense</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q14.png">
                                <p>Burning</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q15.png">
                                <p>Prickly</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q16.png">
                                <p>Stabbing</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q17.png">
                                <p>Shooting</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q18.png">
                                <p>Cramping</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q19.png">
                                <p>Gnawing</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q110.png">
                                <p>Gripping</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q111.png">
                                <p>Pressure</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q112.png">
                                <p>Heavy</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q113.png">
                                <p>Aching</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q114.png">
                                <p>Tender</p>
                            </div>
                            <div class="badge-sm q1_item">
                                <img src="assets/images/q115.png">
                                <p>Stinging</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="question_content">
                <div class="flex-1">
                    <div>
                        <p>How long have you suffered from this pain?</p>
                        <p>Select the one that most applies.</p>
                    </div>
                    <div>                
                        <div class="grid-3">
                            <div class="badge-lg q2_item">
                                <img src="assets/images/q11_1.png">
                                <p>Just today</p>
                            </div>
                            <div class="badge-lg q2_item">
                                <img src="assets/images/q11_2.png">
                                <p>Less than <br/> a week</p>
                            </div>
                            <div class="badge-lg q2_item">
                                <img src="assets/images/q11_3.png">
                                <p>Less than <br/> a month</p>
                            </div>
                            <div class="badge-lg q2_item">
                                <img src="assets/images/q11_4.png">
                                <p>6 months <br/ >or more</p>
                            </div>
                        </div>                
                    </div>
                </div>
            </div>
            <div class="question_content">
                <div class="flex-1">
                    <div>
                        <p>Does the pain come and go?</p>
                        <p>Select the one that most applies.</p>
                    </div>
                    <div>                
                        <div class="grid-4">
                            <div>
                                <div class="badge-lg q3_item">
                                    <img src="assets/images/q31.png">
                                    <p>Yes</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q3_item">
                                    <img src="assets/images/q32.png">
                                    <p>No</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q3_item">
                                    <img src="assets/images/q33.png">
                                    <p>Not Sure</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="question_content">
                <div class="flex-1">
                    <div>
                        <p>Is the pain localized in one spot, or does it radiate into the shoulders, arms, or fingers?</p>
                        <p>Select the one that most applies.</p>
                    </div>
                    <div>                
                        <div class="grid-4">
                            <div>
                                <div class="badge-lg q4_item">
                                    <img src="assets/images/q31.png">
                                    <p>Yes</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q4_item">
                                    <img src="assets/images/q32.png">
                                    <p>No</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q4_item">
                                    <img src="assets/images/q33.png">
                                    <p>Not Sure</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="question_content">
                <div class="flex-1">
                    <div>
                        <p>Are there any other symptoms in addition to neck pain?</p>
                        <p>Select the one that most applies.</p>
                    </div>
                    <div>                
                        <div class="grid-4">
                            <div>
                                <div class="badge-lg q5_item">
                                    <img src="assets/images/q31.png">
                                    <p>Yes</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q5_item">
                                    <img src="assets/images/q32.png">
                                    <p>No</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q5_item">
                                    <img src="assets/images/q33.png">
                                    <p>Not Sure</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="question_content">
                <div class="flex-1">
                    <div>
                        <p>Please type additional symptoms</p>
                    </div>
                    <div>                
                        <div><textarea id="textarea-1" class="textarea" oninput="onInput(this);" placeholder="Please type your answer here"></textarea></div>
                    </div>
                </div>
            </div>
            <div class="question_content">
                <div class="flex-1">
                    <div>
                        <p>What do you do for a living?</p>
                    </div>
                    <div>                
                        <div><textarea id="textarea-2" class="textarea" oninput="onInput(this);" placeholder="Please type your answer here"></textarea></div>
                    </div>
                </div>
            </div>
            <div class="question_content">
                <div class="flex-1">
                    <div>
                        <p>Do you usually spend your day doing manual labour or sitting in front of a computer?</p>
                        <p>Select the one that most applies.</p>
                    </div>
                    <div>                
                        <div class="grid-4">
                            <div>
                                <div class="badge-lg q8_item">
                                    <img src="assets/images/q31.png">
                                    <p>Yes</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q8_item">
                                    <img src="assets/images/q32.png">
                                    <p>No</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q8_item">
                                    <img src="assets/images/q33.png">
                                    <p>Not Sure</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="question_content">
                <div class="flex-1">
                    <div>
                        <p>What is your commute like?</p>
                    </div>
                    <div>                
                        <div><textarea id="textarea-3" class="textarea" oninput="onInput(this);" placeholder="Please type your answer here"></textarea></div>
                    </div>
                </div>
            </div>
            <div class="question_content">
                <div class="flex-1">
                    <div>
                        <p>Do you tend to be more active or sedentary?</p>
                        <p>Select the one that most applies.</p>
                    </div>
                    <div>                
                        <div class="grid-2">
                            <div class="badge-lg q10_item">
                                <img src="assets/images/q12_1.png">
                                <p>Yes</p>
                            </div>
                            <div class="badge-lg q10_item">
                                <img src="assets/images/q12_3.png">
                                <p>No</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="question_content">
                <div class="flex-1">
                    <div>
                        <p>Do you experience numbness and/or pain in the upper limbs</p>
                        <p>Select the one that most applies.</p>
                    </div>
                    <div>                
                        <div class="grid-4">
                            <div>
                                <div class="badge-lg q12_item">
                                    <img src="assets/images/q31.png">
                                    <p>Yes</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q12_item">
                                    <img src="assets/images/q32.png">
                                    <p>No</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q12_item">
                                    <img src="assets/images/q33.png">
                                    <p>Not Sure</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="question_content">
                <div class="flex-1">
                    <div>
                        <p>Do you experience numbness and/or pain in the upper limbs</p>
                        <p>Select the one that most applies.</p>
                    </div>
                    <div>                
                        <div class="grid-4">
                            <div>
                                <div class="badge-lg q11_item">
                                    <img src="assets/images/q31.png">
                                    <p>Yes</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q11_item">
                                    <img src="assets/images/q32.png">
                                    <p>No</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q11_item">
                                    <img src="assets/images/q33.png">
                                    <p>Not Sure</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="question_content">
                <div class="flex-1">
                    <div>
                        <p>Do you feel any difference in the strength of upper limbs?</p>
                        <p>Select the one that most applies.</p>
                    </div>
                    <div>                
                        <div class="grid-4">
                            <div>
                                <div class="badge-lg q12_item">
                                    <img src="assets/images/q31.png">
                                    <p>Yes</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q12_item">
                                    <img src="assets/images/q32.png">
                                    <p>No</p>
                                </div>
                            </div>
                            <div>
                                <div class="badge-lg q12_item">
                                    <img src="assets/images/q33.png">
                                    <p>Not Sure</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer class="fixed-bottom">
        <div class="main_btn">
            <button id="q_back" class="q_back" onclick="plusSlides(-1)">Back</button>
            <button id="q_next" class="q_next" onclick="plusSlides(1)" disabled>Next</button>
        </div>
    </footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
     var q_back = document.getElementById("q_back");
     var q_next = document.getElementById("q_next");
    //question1
    var q1_items = document.getElementsByClassName("q1_item");
    var q1_items_active = 0;
    for (var i = 0; i < q1_items.length; i++) {
        q1_items[i].addEventListener("click", function() {
            this.classList.toggle("q1_item_active");
            q1_items_active = 0;
            for (var j = 0; j < q1_items.length; j++) {
                if(q1_items[j].classList.contains("q1_item_active")) {
                    q1_items_active += 1;
                }
            }
            if(q1_items_active > 0){
                q_next.disabled = false;
            } else if(q1_items_active < 1){
                q_next.disabled = true;
            }
        });
    }

    //question2
    var q2_items = document.getElementsByClassName("q2_item");
    for (var i = 0; i < q2_items.length; i++) {
        q2_items[i].addEventListener("click", function() {
            for (var j = 0; j < q2_items.length; j++) {
                q2_items[j].classList.remove("q2_item_active");
            }
            this.classList.add("q2_item_active");
            q_next.disabled = false;
        });
    }

    //question3
    var q3_items = document.getElementsByClassName("q3_item");
    for (var i = 0; i < q3_items.length; i++) {
        q3_items[i].addEventListener("click", function() {
            for (var j = 0; j < q3_items.length; j++) {
                q3_items[j].classList.remove("q3_item_active");
            }
            this.classList.add("q3_item_active");
            q_next.disabled = false;
        });
    }

    //question4
    var q4_items = document.getElementsByClassName("q4_item");
    for (var i = 0; i < q4_items.length; i++) {
        q4_items[i].addEventListener("click", function() {
            for (var j = 0; j < q4_items.length; j++) {
                q4_items[j].classList.remove("q4_item_active");
            }
            this.classList.add("q4_item_active");
            q_next.disabled = false;
        });
    }

    //question5
    var q5_items = document.getElementsByClassName("q5_item");
    for (var i = 0; i < q5_items.length; i++) {
        q5_items[i].addEventListener("click", function() {
            for (var j = 0; j < q5_items.length; j++) {
                q5_items[j].classList.remove("q5_item_active");
            }
            this.classList.add("q5_item_active");
            q_next.disabled = false;
        });
    }

    //question8
    var q8_items = document.getElementsByClassName("q8_item");
    for (var i = 0; i < q8_items.length; i++) {
        q8_items[i].addEventListener("click", function() {
            for (var j = 0; j < q8_items.length; j++) {
                q8_items[j].classList.remove("q8_item_active");
            }
            this.classList.add("q8_item_active");
            q_next.disabled = false;
        });
    }

    //question10
    var q10_items = document.getElementsByClassName("q10_item");
    for (var i = 0; i < q10_items.length; i++) {
        q10_items[i].addEventListener("click", function() {
            for (var j = 0; j < q10_items.length; j++) {
                q10_items[j].classList.remove("q10_item_active");
            }
            this.classList.add("q10_item_active");
            q_next.disabled = false;
        });
    }
    
    //question11
    var q11_items = document.getElementsByClassName("q11_item");
    for (var i = 0; i < q11_items.length; i++) {
        q11_items[i].addEventListener("click", function() {
            for (var j = 0; j < q11_items.length; j++) {
                q11_items[j].classList.remove("q11_item_active");
            }
            this.classList.add("q11_item_active");
            q_next.disabled = false;
        });
    }

    //question12
    var q12_items = document.getElementsByClassName("q12_item");
    for (var i = 0; i < q12_items.length; i++) {
        q12_items[i].addEventListener("click", function() {
            for (var j = 0; j < q12_items.length; j++) {
                q12_items[j].classList.remove("q12_item_active");
            }
            this.classList.add("q12_item_active");
            q_next.disabled = false;
        });
    }
    
    //question12
    var q12_items = document.getElementsByClassName("q12_item");
    for (var i = 0; i < q12_items.length; i++) {
        q12_items[i].addEventListener("click", function() {
            for (var j = 0; j < q12_items.length; j++) {
                q12_items[j].classList.remove("q12_item_active");
            }
            this.classList.add("q12_item_active");
            q_next.disabled = false;
        });
    }

    //textarea
    function onInput(textarea) {
        var x = textarea.value.toLowerCase();
        if (x.length > 0) {
            q_next.disabled = false;
        } else {
            q_next.disabled = true;
        }
    }

    /* Next & previous buttons */
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("question_content");
        if (n > slides.length) {slideIndex = 1}    
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  
            slides[i].classList.remove("fade");   
        }
        slides[slideIndex-1].style.display = "block";
        slides[slideIndex-1].classList.add("fade");  
    }
    /* disabling Next button */
    q_next.addEventListener("click", function() {
        if(this.disabled === false){
            this.disabled = true;
        }
    });
    /* enabling Next button */
    q_back.addEventListener("click", function() {
        if(q_next.disabled === true){
            q_next.disabled = false;
        }
    });
</script>
</html>