mmoser/skill-assessment-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

summary page rebuild

Browse Source
This commit is contained in:
Mark Moser
2016-08-09 23:17:35 -05:00
parent 084a1a2326
commit 76bb21a150
17 changed files with 141 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/javascripts/jquery-linedtextarea-moser.js vendored
View File

@ -87,17 +87,6 @@
}
/* Set the width */
// var sidebarWidth = linesDiv.outerWidth();
// var paddingHorizontal = parseInt( linedWrapDiv.css("border-left-width") ) + parseInt( linedWrapDiv.css("border-right-width") ) + parseInt( linedWrapDiv.css("padding-left") ) + parseInt( linedWrapDiv.css("padding-right") );
// var linedWrapDivNewWidth = originalTextAreaWidth - paddingHorizontal;
// var textareaNewWidth = originalTextAreaWidth - sidebarWidth - paddingHorizontal - 20;
//
// textarea.width( textareaNewWidth );
// linedWrapDiv.width( linedWrapDivNewWidth );
/* React to the scroll event */
textarea.scroll( function(){
var domTextArea = $(this)[0];

4
app/assets/javascripts/live-coder.js.erb
View File

@ -1,4 +1,6 @@
function updateResults(elem) {
if ($(elem).length ===0){return false;};
var resultsContainer = $(elem).find('[data-id="results"]')[0];
var codeHtml = $(elem).find('.code-html')[0].value.trim();
var codeCss = $(elem).find('.code-css')[0].value.trim();
@ -100,7 +102,7 @@ $(function(){
// wait a half second before updating results
// restart the timer if they resume typing
$('html').on('keyup', '.code-input textarea', function(){
var elem = $(this).closest('.answer-sec.live_code-type, .answer-sec.live_code_text-type');
var elem = $(this).closest("[data-id=live-coder-answer]");
if (timer) { clearTimeout(timer); }
timer = setTimeout(updateResults(elem), 500);
});

228
app/assets/javascripts/summary-edit.js
View File

@ -1,181 +1,83 @@
/* global updateResults */
/* TODO: remove global ^ once live-coder is properly name spaced */
/**
* Summary Page Answer Editor
*/
function disableForm($form){
$form.find('fieldset').prop('disabled', true);
$form.find('textarea').prop('disabled', true);
$form.find('.button-save, .button-cancel').hide();
$form.find('.button-edit').show();
$form.find('.editable').removeClass('editable');
$('.button-edit, .submit-button').removeClass('disabled-button');
}
(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);
}
});
function restoreValues($form){
$form.find('[type=radio][data-last], [type=checkbox][data-last]').each(function(){
$(this).prop('checked', $(this).attr('data-last'));
});
// $('.run-js').hide().delay();
}(jQuery));
$form.find('textarea[data-last]').each(function(){
$(this).val($(this).attr('data-last'));
});
}
var existingValue = [];
function updateLocalValues($form){
$form.find('[type=radio][data-last], [type=checkbox][data-last]').each(function(){
$(this).attr('data-last', $(this).prop('checked') ? 'checked' : '');
});
var editClickHandler = function(e) {
$form.find('textarea[data-last]').each(function(){
$(this).attr('data-last', $(this).val());
});
}
function prepareAjax($form) {
$form.on("ajax:success", function(e, data){
$form.prepend('<div class="success">' + data.message + '</div>');
disableForm($form);
updateLocalValues($form);
}).on("ajax:error", function(e, xhr) {
if (xhr.status === 400){
$form.prepend('<div class="error">' + xhr.responseJSON.join('<br>') + '</div>');
} else {
$form.prepend('<div class="error">Oops! There was an error processing your request. Please try again.</div>');
}
});
}
function editClickHandler(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());
}
});
}
else if (thisEd.find('textarea:not(.code-answer)')) {
existingValue = thisEd.find('textarea:not(.code-answer)').val();
thisEd.find('.chars.hidden').removeClass('hidden');
}
$('.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 $form = $(e.delegateTarget).closest('form');
$(e.delegateTarget).addClass('editable');
$form.find('fieldset').prop('disabled', false);
$form.find('textarea').prop('disabled', false);
$form.find('textarea').focus();
$form.find('.button-edit').hide().delay();
$form.find('.button-save, .button-cancel').show().delay();
}
var cancelClickHandler = function(e) {
function cancelClickHandler(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);
});
}
else if (thisEd.find('textarea:not(.code-answer)')) {
thisEd.find('textarea:not(.code-answer)').val(existingValue);
thisEd.find('.chars').addClass('hidden');
}
$('.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 $form = $(e.delegateTarget).closest('form');
$form.find('.error, .success').remove();
disableForm($form);
restoreValues($form);
updateResults($form.find("[data-id=live-coder-answer]"));
}
var saveClickHandler = function(e) {
function saveClickHandler(e) {
e.preventDefault();
var thisEd = $(e.delegateTarget);
var data =[];
var executeQuery;
var questionId = thisEd.find('.button-edit').attr('data-questionId');
var answerId = thisEd.find('.button-edit').attr('data-answerId');
var $form = $(e.delegateTarget).closest('form');
$form.find('.error, .success').remove();
$form.submit();
}
if (thisEd.hasClass('live_code-type')) {
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 = {
'live_code': {
'html': htmlAnswer,
'css': cssAnswer,
'js': jsAnswer
}
};
} else if(thisEd.hasClass('radio-type')) {
$(thisEd.find('input')).each(function() {
if($(this).prop('checked') === true) {
data = ({
'radio': $(this).val()
});
}
});
} else if(thisEd.hasClass('checkbox-type')) {
data = {'checkbox': []};
$(thisEd.find('input')).each(function() {
if($(this).prop('checked') === true) {
data.checkbox.push($(this).val());
}
});
} else {
data = {'text': 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>');
var postUrl = thisEd.closest('form').attr('action');
$.ajax({
type: "POST",
url: postUrl,
data: ({
'answer': $.extend(data, {'question_id': questionId, 'answer_id': answerId}),
'submit': true
}),
success: function(){ //unused data
executeQuery = true;
},
error: function(){ //unused 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')
$('.summary_tpl fieldset').prop('disabled', true);
$('.summary_tpl textarea').prop('disabled', true);
$('.summary_tpl form').each(function(){ prepareAjax($(this)); });
$('.summary_tpl .answer-sec')
.find('.button-cancel, .button-save').hide().end()
.on('click', '.button-edit', editClickHandler)
.on('click', '.button-cancel', cancelClickHandler)

4
app/assets/stylesheets/molecules/_forms.scss
View File

@ -78,6 +78,10 @@ textarea {
padding: 0 0 3rem;
}
.summary_tpl textarea {
padding: 1rem 1rem 3rem;
}
[type="search"] {
appearance: none;
}

14
app/assets/stylesheets/molecules/_livecoder.scss
View File

@ -2,18 +2,12 @@
margin: 10px 0;
textarea {
background-color: #fff;
border: 1px solid black;
font-family: "Lucida Console", Monaco, monospace;
font-size: 10px;
// line-height: 1.6em;
margin-bottom: 0;
min-height: 205px;
width: 100%;
&[disabled] {
background-color: #ddd;
}
}
}
@ -44,12 +38,6 @@ iframe {
width: 100%;
}
.live-coder-summary{
button.update-button{
display: none;
}
}
@media only screen and (min-width: $desktop) {
.code-input {
float: left;
@ -107,7 +95,7 @@ iframe {
.linedtextarea textarea {
padding-right: 0.3em;
padding-top: 0.3em;
border: 0;
border: 0 !important;
}
.linedwrap .lines {

24
app/controllers/quiz_controller.rb
View File

@ -10,9 +10,10 @@ class QuizController < ApplicationController
end
def update_answer
qid = answer_params[:question_id] || prep_status.current_question_id
@answer = prep_answer qid
send "process_#{prep_question(qid).input_type}"
@answer = prep_answer answer_params[:question_id]
send "process_#{prep_question(answer_params[:question_id]).input_type}"
route_remote and return if request.xhr?
route_answer
end
def summary
@ -65,49 +66,50 @@ class QuizController < ApplicationController
if @answer.errors.present?
prep_status
prep_question answer_params[:question_id]
flash[:answer_error] = answer_params[:question_id].to_i
flash[:error] = answer_params[:question_id].to_i
render :question
else
flash.delete(:answer_error)
# TODO: change params.key? to submit = save/next/summary
# redirect_to :summary and return if params.key?(:update)
redirect_to :saved and return if params.key?(:save)
redirect_to :question
end
end
def route_remote
if @answer.errors.present?
render json: @answer.errors["answer"].to_json, status: 400
else
render json: { message: "Your answer has been updated successfully!" }.to_json
end
end
def process_text
@answer.update(answer: answer_params[:text],
saved: params.key?(:save),
submitted: params.key?(:submit))
route_answer
end
def process_radio
@answer.update(answer: answer_params[:radio],
saved: params.key?(:save),
submitted: params.key?(:submit))
route_answer
end
def process_checkbox
@answer.update(answer: answer_params[:checkbox],
saved: params.key?(:save),
submitted: params.key?(:submit))
route_answer
end
def process_live_code
@answer.update(answer: answer_params[:live_code].to_h,
saved: params.key?(:save),
submitted: params.key?(:submit))
route_answer
end
def process_live_code_text
@answer.update(answer: answer_params[:live_code_text].to_h,
saved: params.key?(:save),
submitted: params.key?(:submit))
route_answer
end
end

2
app/views/quiz/_answer_errors.html.erb
View File

@ -1,4 +1,4 @@
<% if flash[:answer_error] == question.question_id && answer.present? %>
<% if flash[:error] == question.question_id && answer.try(:errors) %>
<% answer.errors.messages[:answer].each do |message| %>
<div class="error"><%= message %></div>
<% end %>

28
app/views/quiz/_checkbox.html.erb
View File

@ -1,18 +1,18 @@
<%
question.input_options.each_with_index do | option, i |
option_id = "#{question.question_id}_#{i}"
<% question.input_options.each_with_index do | option, i |
option_id = "#{question.question_id}_#{i}"
checkbox_html = {class: 'checkbox',
id: "answer_#{option_id}",
name: "answer[checkbox][]",
checked: Array(question.answer).include?(option)
}
answers = answer.try(:answer) || answer
%>
<div class="form-group-multiples">
<%= form.check_box(:answer, checkbox_html, option, '') %>
<%= form.label(option_id, option) %>
</div>
checkbox_html = {class: 'checkbox',
id: "answer_#{option_id}",
name: "answer[checkbox][]",
checked: Array(question.answer).include?(option),
data: { last: Array(question.answer).include?(option) ? 'checked' : '' }
}
answers = answer.try(:answer) || answer
%>
<div class="form-group-multiples">
<%= form.check_box(:answer, checkbox_html, option, '') %>
<%= form.label(option_id, option) %>
</div>
<% end %>
<%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

7
app/views/quiz/_live_code.html.erb
View File

@ -5,7 +5,6 @@
name: "answer[#{question.input_type}][later]",
checked: Array(question.answer).include?('finish-later')
}
disabled = local_assigns.fetch :disable_input, false
answers = answer.try(:answer) || answer
%>
@ -31,17 +30,17 @@
<div id="answer<%= question.question_id %>" data-id="live-coder-answer" style="display: none;">
<div class="code-input">
<label for="answer_live_code_html">HTML</label>
<%= text_area_tag 'answer[live_code][html]', (answers['html']), { disabled: disabled, 'data-id' => 'code-html', class: 'code-answer code-html' } %>
<%= text_area_tag 'answer[live_code][html]', (answers['html']), { data: {id: 'code-html', last: answers['html'] }, class: 'code-answer code-html' } %>
</div>
<div class="code-input">
<label for="answer_live_code_css">CSS</label>
<%= text_area_tag 'answer[live_code][css]', (answers['css']), { disabled: disabled, 'data-id' => 'code-css', class: 'code-answer code-css' } %>
<%= text_area_tag 'answer[live_code][css]', (answers['css']), { data: {id: 'code-css', last: answers['css']}, class: 'code-answer code-css' } %>
</div>
<div class="code-input">
<label for="answer_live_code_js">JS</label>
<%= text_area_tag 'answer[live_code][js]', (answers['js']), { disabled: disabled, 'data-id' => 'code-js', class: 'code-answer code-js' } %>
<%= text_area_tag 'answer[live_code][js]', (answers['js']), { data: {id: 'code-js', last: answers['js']}, class: 'code-answer code-js' } %>
</div>
<div class="results" data-id="results"></div>

9
app/views/quiz/_live_code_text.html.erb
View File

@ -5,7 +5,6 @@
name: "answer[#{question.input_type}][later]",
checked: Array(question.answer).include?('finish-later')
}
disabled = local_assigns.fetch :disable_input, false
answers = answer.try(:answer) || answer
%>
@ -30,21 +29,21 @@
<div id="answer<%= question.question_id %>" data-id="live-coder-answer" style="display: none;">
<label for="answer_live_code_text">Reasoning</label>
<%= text_area_tag 'answer[live_code_text][text]', (answers['text']) %>
<%= text_area_tag 'answer[live_code_text][text]', (answers['text']), {data: {last: answers['text']}} %>
<div class="code-input">
<label for="answer_live_code_html">HTML</label>
<%= text_area_tag 'answer[live_code_text][html]', (answers['html']), { disabled: disabled, 'data-id' => 'code-html', class: 'code-answer code-html' } %>
<%= text_area_tag 'answer[live_code_text][html]', (answers['html']), { data: {id: 'code-html', last: answers['html']}, class: 'code-answer code-html' } %>
</div>
<div class="code-input">
<label for="answer_live_code_css">CSS</label>
<%= text_area_tag 'answer[live_code_text][css]', (answers['css']), { disabled: disabled, 'data-id' => 'code-css', class: 'code-answer code-css' } %>
<%= text_area_tag 'answer[live_code_text][css]', (answers['css']), { data: {id: 'code-css', last: answers['css']}, class: 'code-answer code-css' } %>
</div>
<div class="code-input">
<label for="answer_live_code_js">JS</label>
<%= text_area_tag 'answer[live_code_text][js]', (answers['js']), { disabled: disabled, 'data-id' => 'code-js', class: 'code-answer code-js' } %>
<%= text_area_tag 'answer[live_code_text][js]', (answers['js']), { data: {id: 'code-js', last: answers['js']}, class: 'code-answer code-js' } %>
</div>
<div class="results" data-id="results"></div>

19
app/views/quiz/_radio.html.erb
View File

@ -1,13 +1,12 @@
<%
question.input_options.each do | option |
option_id = "#{option.parameterize}_#{question.to_i}"
radio_html = {class: 'radio', id: option_id}
answers = answer.try(:answer) || answer
%>
<div class="form-group-multiples">
<%= radio_button_tag('answer[radio]', option, (question.answer == option), radio_html) %>
<%= label_tag(option_id, option) %>
</div>
<% question.input_options.each do | option |
option_id = "#{option.parameterize}_#{question.to_i}"
radio_html = {class: 'radio', id: option_id, data: {last: (question.answer == option) ? 'checked' : '' }}
answers = answer.try(:answer) || answer
%>
<div class="form-group-multiples">
<%= radio_button_tag('answer[radio]', option, (question.answer == option), radio_html) %>
<%= label_tag(option_id, option) %>
</div>
<% end %>
<%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

5
app/views/quiz/_text.html.erb
View File

@ -1,11 +1,10 @@
<%
hidden = params[:action] == 'summary' ? 'hidden' : ''
answers = answer.try(:answer) || answer
%>
<label for="answer_text">Enter answer here</label>
<textarea id="answer_text" name="answer[text]" rows="10"><%= answers %></textarea>
<%= text_area_tag 'answer[text]', answers, {rows: 10, data: { last: answers } } %>
<div class="chars <%= hidden %>">Characters remaining: <span></span></div>
<div class="chars <%= params[:action] == 'summary' ? 'hidden' : '' %>">Characters remaining: <span></span></div>
<%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

9
app/views/quiz/summary.html.erb
View File

@ -14,14 +14,14 @@
<hr>
<% @quiz.each do |question| %>
<%= form_for(:answer, url: post_answer_path(answer_id: question.answer_id), html:{class: 'summary-form'}) do |form| %>
<article class="answer-sec <%= question.input_type %>-type" data-qid="<%= question.question_id %>">
<%= form_for(:answer, remote: true, url: post_answer_path(answer_id: question.answer_id), html:{class: 'summary-form'}) do |form| %>
<article class="answer-sec">
<div class="question-heading">
<div class="question-title">
<h3><%= question.question %></h3>
</div>
<div class="answer-buttons">
<a href="<%= question_path(question.question_id) %>" class="tertiary-btn button-edit" data-answerId="<%= question.answer_id %>" data-questionId="<%= question.question_id %>">Edit</a>
<a href="<%= question_path(question.question_id) %>" class="tertiary-btn button-edit">Edit</a>
<button class="tertiary-btn button-save">Save</button>
<button class="tertiary-btn button-cancel">Cancel</button>
</div>
@ -35,7 +35,8 @@
<fieldset disabled class="answer-block">
<%= hidden_field_tag 'answer[question_id]', question.question_id %>
<%= hidden_field_tag 'answer[answer_id]', question.answer_id %>
<%= render partial: question.input_type, locals: {question: question, form: form, answer: question.answer, disable_input: true} %>
<%= hidden_field_tag 'submit', true %>
<%= render partial: question.input_type, locals: {question: question, form: form, answer: question.answer} %>
</fieldset>
</div>
</article>

3
app/views/review/view.html.erb
View File

@ -7,7 +7,7 @@
</p>
<% @quiz.each do |question| %>
<%= form_for(:answer, url: post_summary_path, html:{id: 'summary-form'}) do |form| %>
<%= form_for(:answer, url: '#never-post', html:{id: 'summary-form'}) do |form| %>
<article class="answer-sec <%= question.input_type %>-type" data-qid="<%= question.question_id %>">
<div class="question-heading">
<div class="question-title">
@ -20,7 +20,6 @@
<%= image_tag question.attachment %>
<% end %>
<fieldset disabled class="answer-block">
<%= hidden_field_tag 'answer[question_id]', question.question_id %>
<%= render partial: "quiz/#{question.input_type}", locals: {question: question, answer: question.answer, form: form} %>
</fieldset>
</div>