`
+ ).get(0)
+ }
+ const appendToQuizForm = element => $('#quiz-form').append(element)
+ const removeFromQuizForm = element => $(element).remove()
+
+ const updateProgress = questions => responses => {
+ const responseCount = countValidResponses(responses)
$('#progress')
.css('width', (responseCount / questions.length * 100) + '%')
}
- // Add button to submit response
- $('#quiz')
- .append('')
+ const getQuestionId = id => `question_${id}`
+
+ const updateQuizViewStatus = questions => responses => {
+ const current = countValidResponses(responses)
+ const previousQuestion = document.getElementById(getQuestionId(current-1))
+
+ previousQuestion && removeFromQuizForm(previousQuestion)
- // Is case all questions have been responded
- if (responseCount === questions.length) {
- $('#submit-response').css('display', 'none')
- $('#quiz').append('
Thank you for your responses.
')
- $('#quiz').append('')
+ // Is case all questions have been responded
+ if (questions.length <= current ) {
+ $('#submit-response').css('display', 'none')
+ $('#quiz')
+ .append('
Thank you for your responses.
')
+ .append('')
+ } else {
+ const question = questions[current]
+ question.input = question.input || { input: {type:'input'} }
+
+ const nextQuestion = createQuestionElement(question)(getQuestionId(current))(responses[current])
+ nextQuestion && appendToQuizForm(nextQuestion)
+ }
+
+ updateProgress(questions)(responses)
}
- // Add a reset button that will redirect to quiz start
- $resetButton = $('')
- $resetButton.on('click', function() {
+ const resetQuiz = () => {
localStorage.removeItem('quiz')
location.reload();
- })
- $('#quiz').append($resetButton)
+ }
- // Actions on every response submission
- $('#submit-response').on('click', function() {
- var $inputs = $('[name^=question_' + currentQuestion + ']')
- var question = questions[currentQuestion]
+ const getInputsByName = form => {
+ const inputs = Array.from(form)
+ return name => inputs.filter( input => input.name.includes(name) )
+ }
- // Behavior for each question type to add response to array of responses
- switch (question.input.type) {
- case 'checkbox':
- case 'radio':
- responses[currentQuestion] = []
- $('[name=' + $inputs.attr('name') + ']:checked').each(function(i, input) {
- responses[currentQuestion].push(input.value)
- })
- if (responses[currentQuestion].length === 0) {
- responses[currentQuestion] = null
- }
- break
- case 'inputs':
- responses[currentQuestion] = []
- $inputs.each(function(i, input) {
- responses[currentQuestion].push(input.value)
- })
- break
- default:
- responses[currentQuestion] = $inputs.val()
- }
+ const isValidResponse = response => !!response // has a value
+ && !!Array.from(response).length // not an empty array
+ && !!Array.from(response).reduce((value, item) => value && !!item, true) // no value is empty
- // Set the current responses counter
- var responseCount = 0
- for (i = 0; i < responses.length; i++) {
- question = questions[i]
- switch (question.input.type) {
- case 'checkbox':
- case 'radio':
- case 'inputs':
- if (!!responses[i] && !!responses[i].join('')) {
- responseCount++
- }
- break
- default:
- if (!!responses[i]) {
- responseCount++
- }
- }
- }
+ const countValidResponses = responses => responses
+ .reduce( ((value, response) => value + isValidResponse(response)), 0 )
- // Update progress bar
- $('#progress')
- .css('width', (responseCount / questions.length * 100) + '%')
+ const submitResponse = questions => () => {
+ let {responses=[]} = getQuiz()
+ const currentQuestion = responses.length
+ const getFormInputs = getInputsByName(document.getElementById('quiz-form'))
+ const inputs = getFormInputs(getQuestionId(currentQuestion))
+ const response = inputs
+ .filter(({checked, type}) => type === 'text' || checked ) // has checked and it's false
+ .map(({value}) => value) // map to actual values
- // Check if question had a valid answer
- isQuestionAnswered = true
- if (!responses[currentQuestion]) {
- isQuestionAnswered = false
- }
- if (!!responses[currentQuestion] && !!responses[currentQuestion].length) {
- for (j = 0; j < responses[currentQuestion].length; j++) {
- if (!responses[currentQuestion][j]) {
- isQuestionAnswered = false
- }
- }
- }
+ // Set the current responses counter
+ responses.push(response)
- if (!isQuestionAnswered) {
+ if (!isValidResponse(response)) {
// Alert user of missing response
alert('You must give a response')
} else {
-
- // Display next question
- $('#quiz-form')
- .find('#question-' + currentQuestion).css('display', 'none')
- currentQuestion = currentQuestion + 1
-
- $('#quiz-form')
- .find('#question-' + currentQuestion).css('display', 'block')
-
- // If it was the las question, display final message
- if (responseCount === questions.length) {
- $('#submit-response').css('display', 'none')
- $('#quiz').append('