Hemingway Prototype (master)

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>
    <form id="commentCard">
        <div id="banner" role="banner">
            <div class="pod">

        <a href="{{properties.banner.link}}" target="_blank" title="{{properties.banner.alt}}">
            <img src="{{properties.banner.path}}" alt="{{properties.banner.alt}}" />
        </a>

            </div>
        </div>
        <div id="questions" role="main">
            <div class="pod">
                <!-- Form questions here -->
            </div>
        </div>
        <div id="footer" role="contentinfo">
            <div class="pod">
        <button type="submit">{{properties.submitText}}</button>
        <img src="ol-logo.png" alt="OpinionLab, Inc" />
        <p><a href="{{properties.privacy.link}" title="{{properties.privacy.text}}" target="_blank">{{properties.privacy.text}}</a>&nbsp;|&nbsp;<a href="{{properties.about.link}}" title="{{properties.about.text}}" target="_blank">{{properties.about.text}}</a></p>

            </div>
        </div>
    </form>

    <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}}"...

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,
               ...