简体   繁体   中英

Cant create this QUIZ (Javascript,html)

This is my sample quiz. I am not able to display the result. Please help me I'm new to coding.

The quiz contains certain questions and I want the output to be such that if the user selects all the 'NO' options then it should alert conservative.. else .. aggressive else moderate.

Do i need to add validation to the below code?

 <table id="quizQuestion" style=" font-size: 14px; margin-top:20px; width:820px; text-align:left;" align="center">

           <tbody>
                       <tr height="70">        
                        <td style="width:30px;vertical-align:top ;margin-top:50px; padding-top:20px;"> 01.</td>     
                        <td style="margin-top:50px;">
                            How secure are your current and future income from sources such as salary/ business/ profession
                            <span id="err1" class="validationError"></span>
                        </td>

                        <td width="150px;">
                            <input type="radio" id="opt1" name="q1" value="2">
                            <label for="opt1">Very secured</label>
                        </td>
                        <td width="110px;">
                            <input type="radio" id="opt2" name="q1" value="1">
                            <label for="opt2">Somewhat</label>
                        </td>
                        <td width="120px;">

                            <input type="radio" id="opt3" name="q1" value="0">
                            <label for="opt3">Not secured</label>
                        </td>
                    </tr>
                    <tr height="70">
                        <td style="width:30px; vertical-align:top;padding-top:12px;">02.</td>   
                        <td>
                            Do you have enough cash or liquid investments put aside to meet unforeseen events like job loss or sudden hospitalization?
                            <span id="err2" class="validationError"></span>
                        </td>
                        <td>
                            <input type="radio" id="opt4" name="q2" value="2">
                            <label for="opt4">Yes</label>
                        </td>
                        <td>
                            <input type="radio" id="opt5" name="q2" value="1">
                            <label for="opt5">Somewhat</label>
                        </td>
                        <td>
                            <input type="radio" id="opt6" name="q2" value="0">
                            <label for="opt6">No</label>
                        </td>
                    </tr>
                    <tr height="70">
                    <td style="width:30px; vertical-align:top;padding-top:12px;">03.</td>   
                    <td>
                        Are you comfortable paying EMIs towards your current loans &amp; do you think you'll be able to continue paying them in future?
                        <span id="err3" class="validationError"></span>
                    </td>
                    <td>
                            <input type="radio" id="opt7" name="q3" value="2">
                            <label for="opt7">Yes</label>
                        </td>
                        <td>
                            <input type="radio" id="opt8" name="q3" value="2">
                            <label for="opt8">I've no loans</label>
                        </td>
                        <td>
                            <input type="radio" id="opt9" name="q3" value="0">
                            <label for="opt9">No</label>
                    </td>
                    </tr>


                <tr height="70">
                    <td style="width:30px; vertical-align:top;padding-top:20px;">04.</td>   
                    <td>
                        How long have you been invested in equity related products like stocks, mutual funds, equity ULIPs etc?
                        <span id="err4" class="validationError"></span>
                    </td>
                    <td>
                        <input type="radio" id="opt10" name="q4" value="2">
                        <label for="opt10"> &gt;5 years</label>
                    </td>
                    <td>
                        <input type="radio" name="q4" id="opt11" value="1">
                        <label for="opt11">2-5 years</label>
                        </td>
                        <td>
                            <input type="radio" id="opt12" name="q4" value="0">
                            <label for="opt12"> &lt;2 years</label>
                        </td>
                    </tr>


                <tr height="70">
                    <td style="width:30px; vertical-align:top;padding-top:12px;">05.</td>   
                    <td>
                        Approx. what percentage of your investments is currently held in equity related products like stocks,mutual funds, ULIPs etc?
                         <span id="err5" class="validationError"></span>
                    </td>
                    <td>
                            <input type="radio" id="opt13" name="q5" value="2">
                            <label for="opt13"> &gt;50%</label>
                    </td>
                    <td>    
                            <input type="radio" id="opt14" name="q5" value="1">
                            <label for="opt14">20-50%</label>
                    </td>
                    <td>
                            <input type="radio" id="opt15" name="q5" value="0">
                            <label for="opt15"> &lt;20%</label>
                        </td>
                    </tr>


                <tr height="70">
                    <td style="width:30px; vertical-align:top;padding-top:20px;">06.</td>   
                    <td>
                        What would you do if your equity investments fell by 
                        <br>more than 10% over a short period?
                        <span id="err6" class="validationError"></span>
                    </td>

                        <td>
                            <input type="radio" id="opt16" name="q6" value="2">
                            <label for="opt16">Do Nothing</label>
                        </td>
                        <td>
                            <input type="radio" id="opt17" name="q6" value="1">
                            <label for="opt17">Sell some</label>
                        </td>
                        <td>
                            <input type="radio" id="opt18" name="q6" value="0">
                            <label for="opt18">Sell all</label>
                        </td>
                    </tr>

                <tr height="70">
                    <td style="width:30px; vertical-align:top;padding-top:20px;">07.</td>   
                    <td>
                        What percentage of your monthly household income could <br>
                        you normally make available towards savings?
                        <span id="err7" class="validationError"></span>
                    </td>

                        <td>
                            <input type="radio" id="opt19" name="q7" value="2">
                            <label for="opt19"> &gt;30%</label>
                        </td>
                        <td>    
                            <input type="radio" id="opt20" name="q7" value="1">
                            <label for="opt20">10-30%</label>
                        </td>
                        <td>
                            <input type="radio" id="opt21" name="q7" value="0">
                            <label for="opt21"> &lt;10%</label>
                        </td>
                    </tr>    
                    <tr height="70">

                        <td width="218" colspan="2" height="50" align="left" valign="bottom">
                            <!--<input value="Save" style="color: green" onclick="validateRiskProfile();"  />
                            <input type="button" value="Cancel" style="color: green"/>-->
                            <!-- 
                            <img src="images/save_btn_active.jpg" alt="" onclick="return validateRiskProfile();"  />
                             -->
                             <input type="button" value="Save" style="cursor:pointer;" onclick="displayResult();" class="fwSavebtn">
                             <input type="button" value="Cancel" style="cursor:pointer;" class="fwCancelbtn" onclick="cancelPopup();">
                        </td>
                    </tr>
            </tbody>    

        </table>

---------------------------------------------------------------------------
Javascript

function displayResult() {
    // if (validateRiskProfile()) {
        for (var e = 0, t = 1; 8 > t; t++) try {
            for (var i = 0; 3 > i; i++)
                if (document.getElementsByName("q" + t)[i].checked) try {
                    var n = parseInt(document.getElementsByName("q" + t)[i].value);
                    e += n
                } catch (o) {}
        } catch (o) {
            alert(o)
        }
        if(e >= 0 && 5 > e) { alert("Conservative") }
else if(e > 4 && 10 > e){ alert("Moderate") } 
else if(e > 9 && 15 > e) { alert("Aggressive") }
---------------------------------------------------------------------------

Please help me, I am not able to display the alert messages on clicking the save button.

You forgot to close your function. Add }; to the end of your javascript. Also make sure you're defining this function in the head.

https://jsfiddle.net/dwv1zfps/1/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM