<script type="text/javascript">

        // pageChanged & sizeChanged functions are needed in every model file
        // other functions for model should also be in here to avoid conflicts
        var mcq = new function() {
                // function called every time the page is viewed after it has initially loaded
                this.pageChanged = function() {
            this.startQ();
                        $("#feedback").html("");
                        $("#optionHolder input:checked").prop("checked", false);
                        $("#checkBtn").attr("disabled", "disabled");
                }

                // function called every time the size of the LO is changed
                this.sizeChanged = function() {
                        if (x_browserInfo.mobile == false) {
                                var $panel = $("#pageContents .panel");
                                $panel.height($x_pageHolder.height() - parseInt($x_pageDiv.css("padding-top")) * 2 - parseInt($panel.css("padding-top")) * 2 - 5);
                        }
                }

        this.startQ = function() {
            var correctOptions = [],
               correctAnswer = [],
               correctFeedback = [],
               correctOption = false; // is there a correct answer for the question?

            // Track the quiz page
            this.weighting = 1.0;
            if (x_currentPageXML.getAttribute("trackingWeight") != undefined)
            {
                this.weighting = x_currentPageXML.getAttribute("trackingWeight");
            }
            XTSetPageType(x_currentPage, 'numeric', 1, this.weighting);
            $(x_currentPageXML).children()
                .each(function(i) {
                    if (this.getAttribute("correct") == 'true') {
                        correctOptions.push(i+1+"");
                        correctAnswer.push(this.getAttribute("text"));
                        correctFeedback.push(this.getAttribute("feedback"));
                        mcq.correctOption = true;
                    }
                });
            XTEnterInteraction(x_currentPage, 0, 'multiplechoice', x_currentPageXML.getAttribute("prompt"), correctOptions.join(';'), correctAnswer.join(';'), correctFeedback.join(';'));
        }

                this.init = function() {
                        // correct attribute on option also not used as it doesn't mark correct/incorrect - only gives feedback for each answer
                        var panelWidth = x_currentPageXML.getAttribute("panelWidth"),
                                $splitScreen = $("#pageContents .splitScreen"),
                                $textHolder = $("#textHolder");

                        if (panelWidth == "Full") {
                                $("#pageContents .panel").appendTo($("#pageContents"));
                                $splitScreen.remove();
                        } else {
                                $textHolder.html(x_addLineBreaks(x_currentPageXML.getAttribute("instruction")));
                                var textAlign = x_currentPageXML.getAttribute("align");
                                if (textAlign != "Right") {
                                        if (panelWidth == "Small") {
                                                $splitScreen.addClass("large");
                                        } else if (panelWidth == "Large") {
                                                $splitScreen.addClass("small");
                                        } else {
                                                $splitScreen.addClass("medium");
                                        }
                                } else {
                                        $textHolder
                                                .removeClass("left")
                                                .addClass("right")
                                                .appendTo($splitScreen);
                                        $("#infoHolder")
                                                .removeClass("right")
                                                .addClass("left");
                                        if (panelWidth == "Small") {
                                                $splitScreen.addClass("medium");
                                        } else if (panelWidth == "Large") {
                                                $splitScreen.addClass("xlarge");
                                        } else {
                                                $splitScreen.addClass("large");
                                        }
                                }
                        }

                        $("#question").html(x_addLineBreaks(x_currentPageXML.getAttribute("prompt")));

                        var $optionHolder = $("#optionHolder");
                        if (x_currentPageXML.getAttribute("type") == "Multiple Answer") {
                                $optionHolder.find("input[type='radio']").remove();
                        } else {
                                $optionHolder.find("input[type='checkbox']").remove();
                        }

                        var $optionGroup = $optionHolder.find(".optionGroup");
                                //$option = $optionHolder.find("input"),
                                //$optionTxt = $optionHolder.find(".optionTxt"),

            $(x_currentPageXML).children()
                                .each(function(i) {
                                        var $thisOptionGroup, $thisOption, $thisOptionTxt;
                                        if (i != 0) {
                                                $thisOptionGroup = $optionGroup.clone().appendTo($optionHolder);
                                        } else {
                                                $thisOptionGroup = $optionGroup;
                                        }
                                        $thisOption = $thisOptionGroup.find("input");
                                        $thisOptionTxt = $thisOptionGroup.find(".optionTxt");

                    mcq.currNrOptions = i+1;

                                        $thisOption
                                                .attr({
                                                        "value"               :this.getAttribute("text"),
                                                        "id"          :"option" + i
                                                        })
                                                .change(function() {
                                                        $("#feedback").html("");
                                                        var $checkBtn = $("#checkBtn"),
                                                                $selected = $("#optionHolder input:checked");

                                                        if ($checkBtn.attr("disabled") != "disabled" && $selected.length == 0) {
                                                                $checkBtn.attr("disabled", "disabled");
                                                        } else if ($checkBtn.attr("disabled") == "disabled" && $selected.length > 0) {
                                                                $checkBtn.removeAttr("disabled");
                                                        }
                                                })
                                                .focusin(function() {
                                                        $thisOptionGroup.addClass("highlight");
                                                })
                                                .focusout(function() {
                                                        $thisOptionGroup.removeClass("highlight");
                                                });

                                        $thisOptionTxt
                                                .attr("for", "option" + i)
                                                .data("option", $thisOption)
                                                .html(this.getAttribute("text"));
                                });


                        // checkBtnWidth attribute not used as button will be sized automatically
                        // if language attributes aren't in xml will have to use english fall back
                        var checkBtnTxt = x_currentPageXML.getAttribute("checkBtnTxt");
                        if (checkBtnTxt == undefined) {
                                checkBtnTxt = "Check";
                        }
                        var checkBtnTip = x_currentPageXML.getAttribute("checkBtnTip");
                        if (checkBtnTip == undefined) {
                                checkBtnTip = "Check Answer";
                        }
                        $("#checkBtn")
                                .button({
                                        label:                  checkBtnTxt,
                                        description:    checkBtnTip
                                        })
                                .attr("disabled", "disabled")
                                .click(function() {
                                        var answerFeedback = "",
                                                correct = true,
                                                l_options = [],
                                                l_answer = [],
                                                l_feedback = [],
                                                selected = $("#optionHolder input"),
                                                generalFeedback = "";

                    if (x_currentPageXML.getAttribute("feedback") != undefined) {
                        generalFeedback = "<p>" + x_addLineBreaks(x_currentPageXML.getAttribute("feedback")) + "</p>";
                    }

                    for (var i=0; i<selected.length; i++) {
                        var optionIndex = $(selected[i]).parent().index(),
                                                        selectedOption = $(x_currentPageXML).children()[optionIndex];

                                                correct = correct && (  (selectedOption.getAttribute("correct") == "true" && $(selected[i]).is(':checked')) ||
                                                                                                (selectedOption.getAttribute("correct") == "false" && !$(selected[i]).is(':checked')));
                        if ($(selected[i]).is(':checked')) {
                                answerFeedback += "<p>" + x_addLineBreaks(selectedOption.getAttribute("feedback")) + "</p>";

                                                        l_options.push(optionIndex+1+"");
                                                        l_answer.push(selectedOption.getAttribute("text"));
                                                        l_feedback.push(selectedOption.getAttribute("feedback"));
                                                }
                    }
                    generalFeedback += answerFeedback;

                    var singleRight = x_currentPageXML.getAttribute("singleRight");
                    if (singleRight == undefined) {
                        singleRight = "Your answer is correct";
                    }
                    var singleWrong = x_currentPageXML.getAttribute("singleWrong");
                    if (singleWrong == undefined) {
                        singleWrong = "Your answer is incorrect";
                    }
                    var multiRight = x_currentPageXML.getAttribute("multiRight");
                    if (multiRight == undefined) {
                        multiRight = "You have selected all the correct answers";
                    }
                    var multiWrong = x_currentPageXML.getAttribute("multiWrong");
                    if (multiWrong == undefined) {
                        multiWrong = "You have not selected the correct combination of answers";
                    }

                    var rightWrongTxt = "";
                    // add correct feedback depending on if question overall has been answered correctly or not
                    if (x_currentPageXML.getAttribute("type") == "Multiple Answer") {
                                                if (mcq.correctOption == true) { // there is a correct answer for question
                                                        if (correct == true) {
                                                                rightWrongTxt = '<p><br/>' + multiRight + '</p>';
                                                        } else {
                                                                rightWrongTxt = '<p><br/>' + multiWrong + '</p>';
                                                        }
                                                }
                    } else {
                                                if (mcq.correctOption == true) { // there is a correct answer for question
                                                        if (correct == true) {
                                                                rightWrongTxt = '<p><br/>' + singleRight + '</p>';
                                                        } else {
                                                                rightWrongTxt = '<p><br/>' + singleWrong + '</p>';
                                                        }
                                                }
                    }
                    generalFeedback += rightWrongTxt;
                                        var feedbackLabel = x_currentPageXML.getAttribute("feedbackLabel");
                                        if (feedbackLabel == undefined) {
                                                feedbackLabel = "Feedback";
                                        }
                                        $("#feedback").html("<h3>" + feedbackLabel + "</h3>" + generalFeedback);
                    $(this).hide().show(); // hack to take care of IEs inconsistent handling of clicks

                    XTExitInteraction(x_currentPage, 0, correct, l_options.join(";"), l_answer.join(';'), l_feedback.join(';'));
                    XTSetPageScore(x_currentPage, (correct ? 100.0 : 0.0));
                    if (XTGetMode() == "normal")
                    {
                        // Disable all options
                        var i=0;
                        for (i=0; i<mcq.currNrOptions; i++)
                        {
                            $("#option"+i).attr("disabled", "disabled");
                        }
                    }

                                });

            this.startQ();
                        this.sizeChanged();
                        x_pageLoaded();
                }
        }

        mcq.init();

</script>

<style type="text/css">

        #pageContents .panel {
                overflow:       auto;
        }

        #optionHolder {
                margin-top:     15px;
        }

        #pageContents input {
                float:          left;
                display:        block;
        }

        #optionHolder .optionGroup {
                padding-top:    5px;
                padding-bottom: 5px;
        }

        #pageContents .optionTxt {
                cursor:                 pointer;
                position:               relative;
                margin-left:    30px;
                display:                block;
        }

        #pageContents button {
                margin:         10px;
                float:          right;
        }

        #pageContents #feedback {
                clear:          both;
        }

</style>

<div id="pageContents">

        <div class="splitScreen">

                <div id="textHolder" class="left" tabindex="1"></div>

                <div id="infoHolder" class="right">
                        <div class="panel">
                                <h3 id="question"></h3>
                                <div id="optionHolder">
                                        <div class="optionGroup">
                                                <input type="radio" name="option" />
                                                <input type="checkbox" name="option" />
                                                <label class="optionTxt"></label>
                                        </div>
                                </div>
                                <button id="checkBtn"></button>
                                <div id="feedback"></div>
                        </div>
                </div>

        </div>

</div>