kendo answer template sample

Formative_OrderedAnswer template sample

by jwstott

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<div id='content'>
</div>


<script id="Formative_OrderedAnswer" type="text/x-kendo-template"> 
        <div id="question">
            <h1 class="AssessmentQuestionText">#:data.question#</h1>
        </div>
        <div id="selection">
            <ul>
                <li class="title">
                    <strong>#= data.assessmentDisplayStyle #</strong>
                    <span id="Span1" class="hideCorrectness" style="float:right; "  >
                        <strong>Correct &nbsp;</strong>
                        <img src="/content/images/check_mark_32.png" alt="check_mark" style="position: relative; top: -5px;"/>
                    </span>
                    <span id="Span2" class="hideCorrectness" style="float:right; "   >
                        <strong>Incorrect &nbsp;</strong>
                        <img src="/content/images/delete_32.png" alt="incorrect" style="position: relative; top: -5px;"/>
                    </span>
                    <span id="Span3" class="hideCorrectness" style="float:right; "   >
                        <strong>Submitted</strong>
                    </span>
                    <span id="Span4" class="hideCorrectness" style="float:right; "  >
                        <strong>Partial &nbsp;</strong>
                        <img src="/content/images/YellowFlag_32.png" alt="partial_flag" style="position: relative; top: -5px;"/>
                    </span>
                </li>
                <ul class="subSelection">
                    <li class="subTitle">
                        <strong> Selected: </strong>
                    </li>
                    #if ($.templ.hasSelectedAnswer(data)) {#
                           # for(var i = 0, l =...

JavaScript

if (!$.templ) {
            $.templ = {};
        }
        
        $.templ.isAnswerKeySelected = function (answer) { // assume view is answer object
            var i,
            answerKey = answer.parent().parent().answerKey, // answer.collection.assessment.answerKey
            idx = answerKey.indexOf(answer.key);
            if (idx > -1) {
                return true;
            }
            else {
                return false;
            }
        };
        $.templ.hasSelectedAnswer = function (assessment) {
            return assessment.answerKey.length > 0 ? true : false;
        };
        $.templ.hasSelectedAllAnswers = function (data, answers) {
            if (data.answerKey.length === answers.length) {
                return true;
            }
            else {
                return false;
            }
        };
console.log('fred');

var sessionViewModel = kendo.observable({
    version: 'v0.7.5',
    asmt: {
        id: "d3101e39-eeb2-7747-fd7c-d76d32a1d0de",
        sessionId: "bd3e9509-411d-11c9-6aa1-79c057804211",
        question: "integral of 4x^3 is...",
        questionShort: "integral problem",
        questionStyle: "Single_ABCD",
        assessmentType: "Formative",
        assessmentStyle: "OrderedAnswers",
        scoreValue: 1,
        answerKey: "",
        answerText: "4x^4",
        answers: [{
            id: "87544167-68a1-6bcb-a8e0-e4cd3777330c",
            key: "A",
            text: "x^4"},
        {
            id: "0891607d-91b2-3386-7f2c-fc82a1d0cc66",
            key: "B",
            text: "4x^4"},
        {
            id: "657ca19e-4017-84ef-03e5-fe25d01a96b8",
            key: "C",
            text: "x^2"}],
        points: 0,
        revealAnswer: false,
        isPollingActive: true,
        hasSubmitted: false,
        orderedAnswers: []
    }
});

var temp = kendo.template($('#Formative_OrderedAnswer').html(), {
    useWithBlock: false
});
$('#content').html(temp(sessionViewModel.asmt));