skill-assessment-app/app/assets/javascripts/summary-edit.js

/**
 * Summary Page Answer Editor
 */

(function($){
  $.fn.setTextAreaHeight = function(input) {
    return this.each(function(){
      var lineHeight = parseInt($(this).css('line-height'));
      var rows = Math.ceil(input / lineHeight);
      rows = rows == 0 ? 1 : rows;

      $(this).attr('rows', rows);
    })
  }

  $('input[type="radio"]').on('change', function() {
    var inputName = $(this).attr('name');
    //$('input[name="'+inputName+'"]').attr('checked', false);
    var value = $(this).attr('value');
    $('input[name="'+inputName+'"][value="'+value+'"]').attr("checked",true);
    $('input[name="'+inputName+'"]').each(function() {
      if($(this).val() != value) {
        $(this).attr('checked', false);
      }
    });
  });

  // $('.run-js').hide().delay();
}(jQuery));

var existingValue = [];

var editClickHandler = function(e) {
  e.preventDefault();
  var thisEd = $(e.delegateTarget);
  var height = thisEd.find('p').height();
  thisEd.data('answer', thisEd.find('p').text());
  if(thisEd.find('input').attr('type') == 'radio') {
    existingValue = thisEd.find('input:checked').val();
  }
  else if(thisEd.find('input').attr('type') == 'checkbox') {
    $(thisEd.find('input')).each(function() {
      if($(this).prop('checked')==true) {
         existingValue.push($(this).val());
      }
    });
  }

  $('.button-edit, .submit-button').addClass('disabled-button');
  thisEd.addClass('editable');
  thisEd.find('.text-answer:not(.code-answer)').replaceWith('<textarea class="answer-block">' + $.trim(thisEd.data('answer')) + '</textarea>');
  thisEd.find('.answer-block, .code-answer').prop('disabled', false);
  thisEd.find('textarea').setTextAreaHeight(height);
  thisEd.find('textarea.answer-block').focus();
  thisEd.find('.button-edit').hide().delay();
  thisEd.find('.button-save, .button-cancel').show().delay();
  // thisEd.find('button.run-js').show().delay();
};

var cancelClickHandler = function(e) {
  e.preventDefault();
  var thisEd = $(e.delegateTarget);
  if(thisEd.find('input').attr('type') == 'radio') {
    $(thisEd.find('input')).each(function() {
        if($(this).val()!=existingValue) {
          $(this).attr('checked', false).prop('checked', false);
        }
        else {
          $(this).prop('checked', true);
        }
      });
  }
  else if(thisEd.find('input').attr('type') == 'checkbox') {
    $(existingValue).each(function(index, value) {
      thisEd.find('input[value="'+value+'"]').prop('checked', true);
    });
  }
  $('.success, .error').remove();
  $('.button-edit, .submit-button').removeClass('disabled-button');
  thisEd.removeClass('editable');
  thisEd.find('textarea:not(.code-answer)').replaceWith('<p class="text-answer answer-container">' + $.trim(thisEd.data('answer')) + '</p>');
  thisEd.find('.answer-block, .code-answer').prop('disabled', true);
  thisEd.find('.button-edit').show();
  thisEd.find('.button-save, .button-cancel').hide();
  // thisEd.find('button.run-js').hide();
  existingValue = [];
};

var saveClickHandler = function(e) {
  e.preventDefault();
  var thisEd = $(e.delegateTarget);
  var data =[];
  var executeQuery;
  var questionId = thisEd.find('.button-edit').attr('data-questionid');

  if (thisEd.find('textarea.code-answer')) {
    var htmlAnswer = $(thisEd.find('textarea.code-html')[0]).val();
    var cssAnswer = $(thisEd.find('textarea.code-css')[0]).val();
    var jsAnswer = $(thisEd.find('textarea.code-js')[0]).val();
    data = {
      'html': htmlAnswer,
      'css': cssAnswer,
      'js': jsAnswer
    }
  } else if(thisEd.find('input').attr('type')=='radio') {
    $(thisEd.find('input')).each(function() {
      if($(this).prop('checked')==true) {
        data = $(this).val();
      }
    });
  } else if(thisEd.find('input').attr('type')=='checkbox') {
    $(thisEd.find('input')).each(function() {
      if($(this).prop('checked')==true) {
        data.push($(this).val());
      }
    });
  } else {
    data = thisEd.find('textarea').val();
  }
  if(data == '') {
    $(thisEd).before('<div class="error">Please select or enter a value.</div>');
  } else {
    thisEd.find('textarea:not(.code-answer)').replaceWith('<p class="text-answer answer-container">' + $.trim(thisEd.find('textarea').val()) + '</p>');
    $.ajax({
      type: "POST",
      url: "/summary",
      data:{ id: questionId, answer: data},
      success: function(data){
        executeQuery = true;
        //console.log(data);
      },
      error: function(data){
        executeQuery = false;
      }
    }).done(function() {
    if(executeQuery == true) {
      $('.success, .error').remove();
      $(thisEd).before('<div class="success">Your answer has been updated successfully!</div>');
      $(thisEd).find('.code-answer').attr('disabled', true);
    }
    if(executeQuery == false) {
      $('.error, .success').remove();
      $(thisEd).before('<div class="error">Oops! There was an error processing your request. Please try again.</div>');
    }
    });

  $('.button-edit, .submit-button').removeClass('disabled-button');
  thisEd.removeClass('editable');
  thisEd.find('.answer-block').prop('disabled', true);
  thisEd.find('.button-edit').show();
  thisEd.find('.button-save, .button-cancel').hide();
}
};

$('.answer-block').prop('disabled', true);

// Question events
 $('.answer-sec')
  .find('.button-cancel, .button-save').hide().end()
//   // delegating events
  .on('click', '.button-edit', editClickHandler)
  .on('click', '.button-cancel', cancelClickHandler)
  .on('click', '.button-save', saveClickHandler);