YSR Keyed Entry selval

by KelseyW

HTML

<div class="pbBody">

    <h4>Basic Information</h4>

    <div class="form-group">
        <label class="col-md-6 col-lg-6 control-label">
            Date of administration
        </label>
        <div class="col-md-4 col-lg-2">
            <div class="requiredInput">
                <div class="requiredBlock"></div>
                <span class="dateInput dateOnlyInput">
						<input class="form-control  input-sm" id="YSR_Page:DS_YSR:mainBlock:DOAYSR__c" name="YSR_Page:DS_YSR:mainBlock:DOAYSR__c" placeholder="MM/DD/YYYY" size="12"  type="text"><!--onfocus="DatePicker.pickDate(true, 'YSR_Page:DS_YSR:mainBlock:DOAYSR__c', false);" -->
						<span class="dateFormat">[&nbsp;<!--<a href="javascript:DatePicker.insertDate('2/1/2018', 'YSR_Page:DS_YSR:mainBlock:DOAYSR__c', true);">-->/2/1/2018</a>&nbsp;]</span>
                </span>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-md-6 col-lg-6 control-label">
            How was this form administered?
        </label>
        <div class="col-md-4 col-lg-2">
            <select id="YSR_Page:DS_YSR:mainBlock:YSRMETH__c" name="YSR_Page:DS_YSR:mainBlock:YSRMETH__c" class="form-control input-sm" size="1">
                <option value=""></option>
                <option value="0">Pen and paper only</option>
                <option value="1">Electronic only</option>
            </select>
        </div>
    </div>

    <h4>Question</h4>

    <div class="striped-question" id="questionRows">

        <div class="form-group ">
            <label class="col-md-12 col-lg-5 control-label">
                <span class="nmbr">1.</span> I act too young for my age&nbsp;&nbsp;
                <span id="YSR_Page:DS_YSR:mainBlock:qContent:0:j_id64" style="display: none;"></span>
            </label>
            <div class="col-md-12 col-lg-7" id="fieldset1">
                <span class="nmbr"></span>
                <fieldset style="border: none;">
                    <table...

CSS

.focusedRow {
    outline: 1px solid red;
}

.blue {
    background: blue;
}

.foci {
    background: yellow;
}

JavaScript

$(document).ready(function() {
    var questions = $('.form-group');
    console.log(questions);

    var keyName = document.addEventListener("keydown", function(event) {
        var keyName = event.which;
        console.log(keyName + ' was pressed');
        /*	var meaningKey = (
        		if(keyName == 48 || keyName == 96){
        			meaningKey = 0;
        		}
        		else if(keyName == 49 || keyName == 97){
        			meaningKey = 1;
        		}
        		else if(keyName == 50 || keyName == 98){
        			meaningKey = 2;
        	});*/
        return meaningKey;
        //  return keyName;
    });


    var meaningKey = function keyMean(keyName) {
		console.log($keyName);
		var kn = $(keyName);
		console.log(kn);
        var meaningKey;
        if (keyName == 48 || keyName == 96) {
            meaningKey = 0;
        } else if (keyName == 49 || keyName == 97) {
            meaningKey = 1;
        } else if (keyName == 50 || keyName == 98) {
            meaningKey = 2;
        }
        return meaningKey;
        //console.log(meaningKey);
    }

    console.log(meaningKey);

    //behavior for parent of focus
    $(questions).focusin(function() {
        console.log($keyName + ' keyName');
        console.log(this);
        var $currentQ = $(this);
        var $fs = $currentQ.find('fieldset');
        $fs.addClass('foci');
        console.log('key ' + keyName);

        $currentQ.addClass('focusedRow');
        console.log($currentQ);
        console.log(keyName + ' pressed w/ question');
        var x = (
            (keyName == 48 || keyName == 96) ? '0' : (
                (keyName == 49 || keyName == 97) ? '1' : (
                    (keyName == 50 || keyName == 98)) ? '2' :
                ''));
        //$("input").val(x);
        console.log(x + ' keypress value');

    });

    $(questions).focusout(function() {
        console.log(this);
        $(this).removeClass('focusedRow blue foci');
        //  $(this).removeClass('blue');
    });

   ...