get questions

isolate and manipulate questions

by KelseyW

HTML

First Name :
<input type='text' id='txtFirstName' />
<br/>
<br/> Last Name :
<input type='text' id='txtLastName' />
<br/>
<br/> Age :
<input type='text' id='txtAge' />
<br/>
<br/>

<input type='button' id='btnSubmit' Value=' Submit' />

<div class="pbBody">
    <span id="YSR_Page:DS_YSR_Mock:mainBlock:j_id27"></span>

    <div class="striped-question" id="questionRows">
        <div class="form-group" id="groupPanel">

            <label class="col-md-12 col-lg-5 control-label" id="questionLabel">
                <span class="nmbr">1.</span>Acts too young for his/her age&nbsp;&nbsp;
            </label>
            <div class="col-md-12 col-lg-7 radio-div" id="fieldset1">
                <span class="nmbr"></span>
                <fieldset style="border: none;">
                    <table role="presentation" id="YSR_Page:DS_YSR_Mock:mainBlock:qContent:0:radioSelections" class="radio-list radio-list-inline">
                        <tbody>
                            <tr>
                                <td>
                                    <input name="YSR_Page:DS_YSR_Mock:mainBlock:qContent:0:radioSelections" id="YSR_Page:DS_YSR_Mock:mainBlock:qContent:0:radioSelections:0" value="0" type="radio">
                                    <label for="YSR_Page:DS_YSR_Mock:mainBlock:qContent:0:radioSelections:0"> 0 = Not True</label>
                                </td>
                                <td>
                                    <input name="YSR_Page:DS_YSR_Mock:mainBlock:qContent:0:radioSelections" id="YSR_Page:DS_YSR_Mock:mainBlock:qContent:0:radioSelections:1" value="1" type="radio">
                                    <label for="YSR_Page:DS_YSR_Mock:mainBlock:qContent:0:radioSelections:1"> 1 = Somewhat or Sometimes True</label>
                                </td>
                                <td>
                                    <input name="YSR_Page:DS_YSR_Mock:mainBlock:qContent:0:radioSelections"...

CSS

.focused {
    outline: 1px solid red;
}

JavaScript

$(document).ready(function() {
    $('input:text:first').focus().addClass('focused');

    $('input:radio').bind("keydown", function(e) {
        var n = $("input:text").length;
        var Qs = $("table.radio-list").length;
        //  var totalQs = $("table:radio-list").length;
        alert("There are " + Qs + " questions.");
        if (e.which == 13) { //Enter key
            e.preventDefault(); //to skip default behavior of the enter key
            var thisQnum = $('table.radio-list').index(this) + 1;
            var nextIndex = thisQnum + 1;
            alert(thisQnum + " selected.");
            //if div#questionRows.focused

            if (nextIndex < Qs)
                $('table.radio-list')[nextIndex].focus();
            else {
                $('table.radio-list')[nextIndex - 1].blur();
                $('#btnSubmit').click();
            }
        }
    });

    $('#btnSubmit').click(function() {
        // alert('Form Submitted');
        $("div.form-group").each(function(index, element) {
            // element == this
            $(element).css("backgroundColor", "yellow");
            var qNum = index + 1;
            // $(this).closest('div').next().find(':input').first().focus();
            alert('Now hilighting question #' + qNum); //object HTMLDivElement
            //$("div.form-group").next().css("backgroundColor", "blue");
            var qSet = $("table.radio-list");
            qSet.css("backgroundColor", "blue");
            //$("table.radio-list").css("backgroundColor", "blue");
        });
        // $(tr).css("borderColor", "blue");
    });
});