gistfile1.js

var html = require("unpack-html")
var setTimeout = require("timers").setTimeout

var map = require("reducers/map")
var fold = require("reducers/fold")
var events = require("dom-reduce/event")

var Modal = require("../modal")
var classicAnswerHtml = '\
    <div class="answer-modal">\
        <header><h2>Question Dialog</h2></header>\
        <p data-marker="question"></p>\
        <textarea class="input data-marker="answer"></textarea>\
        <hr/>\
    </div>'
/*
    When a teacher broadcasts a new question then all connected learner clients
    Get an answer dialog on demand.

    This is modelled as when we have new questions, then generate modal dialog

    And return a transformation of the questions into the answers
*/
function AnswerModalWidget(question) {
    // when question has value then
    return map(question, function (questionState) {
        // Create answer modal
        var elements = html(classicAnswerHtml)
        var closeModal = Modal(elements.root)

        // set the question context
        elements.question.textContent = questionState.question

        // when click skip then closeModal
        fold(events(elements.skip, "click"), closeModal)

        // when click send then closeModal and return selected
        // answer
        return map(events(elements.send, "click"), function () {
            closeModal()

            return {
                answer: elements.answer.value
                , question: question
            }
        })
    })
}