quizzes.coffee | |
---|---|
The toolkit box is shared by the backoffice UI and frontoffice UI. | toolkit = require('client/toolkit')
socket = io.connect() |
Hook quiz starter buttons to ajaxify it and stay on page. | ajaxifyStarts = ->
$('form[data-action="start"]').on 'submit', (e) ->
e.preventDefault()
form = $(@)
form.prev('.start-notice').show()
($ '.alert').hide()
$.ajax form.attr('action'),
type: form.attr('method')
data: form.serialize() |
Hook the "next question" button (through event delegation, as it may get in the page later on) to ajaxify it and stay on page. | ajaxifyNext = ->
$(document).on 'click', 'a#nextQuestion', (e) ->
e.preventDefault()
$.ajax(e.currentTarget.href, type: 'post', data: { _method: 'put' }) |
React to quiz joins by updating the displayed player counts on the current quiz (post-init). | maintainBackPlayerCount = ->
counter = $('#currentPlayers')
return unless counter.length
socket.on 'quiz-join', (user, playerCountStr) ->
counter.text playerCountStr |
Hook into workflow notifications to update the back UI in the quiz listing. | maintainQuestionFeedback = ->
series = $('#currentAnswers')
countDown = $('#countDown')
feedback = $('#feedback')
feedbackTpl = require('back/client/question_stats') |
Question starts clean up the dynamic UI and start the countdown. | socket.on 'question-start', (question, expiresAt) ->
series.html('').show()
feedback.html ''
question.expiresAt = expiresAt
question.remainingTime = toolkit.remainingTime
countDown.text(question.remainingTime()).show()
chrono = ->
clearInterval itv if question.expiresAt <= Date.now()
countDown.text question.remainingTime()
itv = setInterval(chrono, 1000) |
React to question-end stats by displaying them using a shared stats view (which also contains a "next question" button). | socket.on 'question-end', (stats, quizId) ->
countDown.hide()
series.hide()
feedback.html feedbackTpl({ stats: stats, quizId: quizId }) |
Display dots when answers get sent to the engine. First-answer is a blue dot, re-answer turns the dot orange. | socket.on 'new-answer', (userId) ->
series.append "<li data-user-id='#{userId}'>•</li>"
socket.on 'edit-answer', (userId) ->
series.find("li[data-user-id=#{userId}]").addClass 'changed' |
Quiz ends? Redirect to scoreboard! | socket.on 'quiz-end', ->
window.location.href = '/admin/quizzes/scoreboard'
$ ->
ajaxifyStarts()
ajaxifyNext()
maintainBackPlayerCount()
maintainQuestionFeedback()
|