YSR Snip + Keyed Entry

by KelseyW

HTML

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

  <div class="alert alert-info">
    <h4>COPYRIGHTED MATERIALS</h4>
    <p>
      Fill out this form to reflect <strong>your</strong> view...
    </p>
    <p>
      Below is a list of items that describe kids....
    </p>
    <dl>
      <dt>0 = Not True (as far as you know)</dt>
      <dt>1 = Somewhat or Sometimes True</dt>
      <dt>2 = Very True or Often True</dt>
    </dl>
  </div>

  <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" onfocus="DatePicker.pickDate(true, 'YSR_Page:DS_YSR:mainBlock:DOAYSR__c', false);" placeholder="MM/DD/YYYY" size="12" type="text"><span class="dateFormat">[&nbsp;<a href="javascript:DatePicker.insertDate('5/8/2018', 'YSR_Page:DS_YSR:mainBlock:DOAYSR__c', true);">5/8/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 ysr-text">
					<span class="nmbr">1.&nbsp;</span>I act too young for my age<span...

CSS

.blue {
  background-color: blue;
  color: white;
}

.yellow {
  background-color: yellow;
  color: black;
}

.redB {
  border: 1px solid red;
}

JavaScript

$(document).ready(function() {

  var keyVal;
  var radioVal;
  var qVal;
  var varVal;
  var labelVal;
  var focusVal;

});

//listens for keypress on radiobutton question section
//  $(.striped-question)?
  document.addEventListener('keydown', (e) => {
      var keyName = e.key;
	  var keyCode = e.which();
      console.log(keyName+" = "+keyCode);
      $("input[type!='text']").keydown(function(e) {
          if (keyName === '0' || keyName === '1' || keyName === '2') {
            alert(keyName);
          } else if (keyCode == '13') {
			event.preventDefault();
            alert("yo");
          };
      });
  });


//when a radiobutton in the container is focused, get the question number and the answer selection
$('.form-group input:radio').focus(function() {
  var $value = $(this).val();
  var $question = $(this).parentsUntil('.striped-question');
  $question.addClass("blue");
  var $label = $question.children('.ysr-text');
  $label.addClass("yellow");
  var $number = parseInt($label.text());
  alert('Question ' + $number + ' = ' + $value);
});