kendo answer template sample

Formative_MultiChoiceSingleAnswer 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_MultiChoiceSingleAnswer" 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>
                </li>
            </ul>
<ul id="answerOptions">
                # for(var i = 0, l = data.answers.length; i < l; i++){
                 var ans = data.answers[i];#
                <li data-key="#=ans.key#"   
                         # if ($.templ.isTrue(ans)) {#
                        class="option selected"
                    # } else {#
                        class="option"
                    #}#
                    > 
                    <span class="optionId">
                        #=ans.key#
                    </span>
                    <span class="optionText">
                        #=ans.text#
                    </span>
                </li>
                #}#
            </ul>
            
                    </div>
</script>

JavaScript

if (!$.templ) {
    $.templ = {};
}

function isTrue2() {
  // this will not work, must use globaly accessable function for templates  
};

$.templ.isTrue = function(ans) {
    var x = ans.parent().parent().get('points'); // move from ans, to array, to assessment
    console.log(x);
    var y = ans.parent().parent().questionShort; 
    console.log(y);
    console.dir(ans.parent().parent());
    return ans.key === "A" ? true : false;
};
window.jimbo = function() {
    console.log('xxx');
};

function calcMe() {
    console.log('jimmy');
};
console.log('fred');

var sessionViewModel = kendo.observable({
    version: 'v0.7.5',
    asmt : {
    id: "5e907cb8-cade-4423-01e9-6b4b70aa376b",
    sessionId: "9720bdf0-fc8c-5968-41ea-29d610ef542a",
    question: "integral of 4x^3 is...",
    questionShort: "integral problem",
    questionStyle: "Single_ABCD",
    assessmentType: "Formative",
    assessmentStyle: "MultiChoiceSingleAnswer",
    scoreValue: 1,
    answerKey: "",
    answerText: "x^4",
    answers: [{
        id: "60e568a0-3f0b-7e97-e582-a343c65044eb",
        key: "A",
        text: "x^4"},
    {
        id: "2f81e048-588b-befc-27bd-7f80ac6db6f2",
        key: "B",
        text: "4x^4"},
    {
        id: "6d551d14-8b5f-9e44-da07-7ce085b1af72",
        key: "C",
        text: "x^2"}],
    points: 0,
    revealAnswer: false,
    isPollingActive: true,
    hasSubmitted: false,
    assessmentDisplayStyle: "Single Answer"
}
    });

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