Sample Assmt Coll

Simple test foreach - observable array for Assessments

by jwstott

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<form action='/someServerSideHandler'>
    <p>Exam:  
        <span data-bind='text: metadata.examName'></span>
        <span data-bind='text: assessments().length'></span> questions</p>
    Answered Questions <span data-bind="text: answeredAssessments().length"></span>
    
    <table data-bind='visible: assessments().length > 0'>
        <thead>
            <tr>
                <th>Questions</th>
            </tr>
        </thead>
        <tbody data-bind="template: { name: displayMode, foreach: activePage}">
            
        </tbody>
    </table>
 
    <!--
    <button data-bind='click: goPrevious, enable: canGoPrevious()' >Prev</button>
    <button data-bind='click: goNext, enable: canGoNext()' >Next</button>
    <button data-bind='click: goFirstOpen, enable: hasOpen()' >NextOpen</button>
    -->
    

</form>

<script type="text/html" id="single">
    <tr data-bind="css: { odd: $index() % 2 != 0, even: $index() % 2 == 0 }">
                <td >
                        <span data-bind='text: ($index() + 1) + ")"' >
                        </span>
                </td>
                <td>
                    
                    <div data-bind='foreach: assessmentAnswers' style="float:left;">
                        <label data-bind="text: key" />
                        <input data-bind="value:key, checked: $parent.answerKey, name:$index +'radio'" type = "radio"  />
                        
                    </div>
                    
                </td>
            </tr>
</script>
<script type="text/html" id="multi">
    <tr data-bind="css: { odd: $index() % 2 != 0, even: $index() % 2 == 0 }">
                <td >
                        <span data-bind='text: ($index() + 1) + ")"' >
                        </span>
                </td>
                <td>
                    
                    <div data-bind='foreach: assessmentAnswers'>
      ...

SCSS

input[type=checkbox] {
    margin-bottom: 4px;
    vertical-align: middle;
}

input[type=radio] {
    margin-bottom: 4px;
    vertical-align: middle;
}

label {

    text-align:left;
    
}

JavaScript

var ces = ces || {};


ces.AssessmentModel = function(question, answerKey, typeAssessment) {
    var name = ko.observable(question),
        isDirty = ko.observable(false),
        typeAssessment = ko.observable(typeAssessment),
        answerKey = ko.observable(answerKey),
        answerKeys = ko.observableArray(),
        assessmentAnswers = ko.observableArray([{
            key: 'A'},
        {
            key: 'B'},
        {
            key: 'C'},
        {
            key: 'D'}]),

        init = function() {
            if (answerKey().length > 0) {
                answerKeys(answerKey().split(''));
            }
            answerKey.subscribe(function(newValue) {
                //console.info(newValue);
                isDirty(true);
            });
            answerKeys.subscribe(function(newValue) {
                var combined = ko.utils.unwrapObservable(answerKeys()).join('');
                answerKey(combined); //update value
            });
            return this;
        };

    return {
        name: name,
        isDirty: isDirty,
        init: init,
        answerKey: answerKey,
        answerKeys: answerKeys,
        assessmentAnswers: assessmentAnswers,
        typeAssessment: typeAssessment
    };
};

ces.ExamModel = function(assessmentModel) {
    var dirtyCallback, 
        metadata = {
        sessionName: "",
        examName: ""
    },
        assessments = ko.observableArray(assessmentModel),
        currentPageIndex = ko.observable(0),
        maxPageIndex = ko.computed(function() {
            return Math.ceil(ko.utils.unwrapObservable(assessments).length / pageSize) - 1;
        }),
        pageSize = ko.observable(5),

        activePage = ko.computed(function() {
            var startIndex = pageSize() * currentPageIndex();
            return assessments().slice(startIndex, startIndex + pageSize());
        }),
        answeredAssessments = ko.computed(function() {
            return ko.utils.arrayFilter(assessments(),...