Hemingway Prototype (migrate-question-render-json)

by chicagogrooves

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <div id="foo">
    <h2 id="title">Comment Card</h2>
    <div id="questions"></div>

    <template name="question-renderer-textbox">
        <label for="{{qId}}">{{render.text}}</label>
        <input type="text" name="{{name}}" maxlength="1000" id="{{qId}}" />
    </template>
    <template name="question-renderer-textarea">
        <label for="{{qId}}">{{render.text}}</label>
        <textarea name="{{name}}" id="{{qId}}" maxlength="1000" aria-describedby="charCount"></textarea>
        <span id="charCount">1000 characters left</span>
    </template>
    <template name="question-renderer-radio">
        <fieldset id="{{qId}}">
            <legend>{{render.text}}</legend>
            {{#each render.options}}
                <input name="{{../name}}" type="radio" value="{{value}}" /><label>{{{text}}}</label>
            {{/each}}
        </fieldset>
    </template>
    <template name="question-renderer-select">
        <label for="{{qId}}">{{render.text}}</label>
        <select name="{{name}}" id="{{qId}}">
            {{#each render.options}}
            <option value="{{value}}">{{text}}</option>
            {{/each}}
        </select>
    </template>
    <template name="question-renderer-multiple">
        <label for="{{qId}}">{{render.text}}</label>
        <select name="{{name}}" id="{{qId}}" multiple>
            {{#each render.options}}
            <option value="{{value}}">{{text}}</option>
            {{/each}}
        </select>
    </template>

JavaScript

/* global document */
define("cc-context", [], function(){
    return function(){
        this.referer = document.location.href;
        this.tealeafId = "jasmine";
    };
});

define('question-set', [], function() {
    return [{
        qId: 1,
        name: 'topic_selection',
        validation: {
            required: true,
            qtype: 'dropdown',
            message: 'Please choose a topic for your comments.'
        },
        render: {
            text: 'Choose a topic:',
            qtype: 'select',
            options: [{
                value: '',
                text: ''
            }, {
                value: 'Website feedback',
                text: 'Website feedback'
            }, {
                value: 'Store feedback',
                text: 'Store feedback'
            }, {
                value: 'Product feedback',
                text: 'Product feedback'
            }, {
                value: 'General feedback',
                text: 'General feedback'
            }]
        }
    }, {
        qId: 2,
        name: 'comments',
        validation: {
            required: false,
            qtype: 'string',
            message: 'Please leave some comments.'
        },
        render: {
            text: 'Comments',
            qtype: 'textarea'
        }
    }, {
        qId: 3,
        name: 'overall',
        validation: {
            required: true,
            qtype: 'integer',
            message: 'Please choose an overall rating.'
        },
        render: {
            text: 'Overall Rating',
            qtype: 'radio',
            options: [{
                value: 1,
                text: '1<span class="accessibility">Very dissatisfied</span>'
            }, {
                value: 2,
                text: '2<span class="accessibility">Dissatisfied</span>'
            }, {
                value: 3,
                text: '3<span class="accessibility">Neutral</span>'
            }, {
                value: 4,
               ...