From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 27 Jan 2021 21:09:31 +0000 (+0100)
Subject: wait #4231 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=258b852ec4df5e8488e5f99479f0cb8204b203ed;p=fluidbook-toolbox.git

wait #4231 @3
---

diff --git a/app/Models/Quiz.php b/app/Models/Quiz.php
index eccd2af8f..d3e62f242 100644
--- a/app/Models/Quiz.php
+++ b/app/Models/Quiz.php
@@ -255,72 +255,7 @@ class Quiz extends CubistMagicAbstractModel
             }
         }
 
-        $data = $this->getPageData();
-
-        // Create data.xml
-        $xml = simplexml_load_string('<?xml version="1.0" encoding="UTF-8" ?><quiz />');
-        $xml->addChild('id', $data->get('id'));
-        $xml->addChild('title', $data->get('title'));
-        $xml->addChild('threshold', $data->get('threshold', '0') ?: '0');
-        $xml->addChild('restart_button', $data->get('restart_button', '0') ? '1' : '0');
-        $xml->addChild('instantReview', $data->get('instantReview', true) ? '1' : '0');
-        $xml->addChild('review', $data->get('review', 'always'));
-        $xml->addChild('display_score', $data->get('display_score', true) ? '1' : '0');
-        $xml->addChild('logattempts', $data->get('logattempts', false) ? '1' : '0');
-        $xt = $xml->addChild('translations');
-        /** @var QuizTranslation $translation */
-        $tid = $data->get('translation', 1) ?? 1;
-        if ($tid === 'en') {
-            $tid = 1;
-        }
-        $translation = QuizTranslation::find($tid);
-        foreach (QuizTranslation::getTexts() as $text => $default) {
-            $xt->addChild($text, $translation->getAttribute($text));
-        }
-        foreach (self::_getColors() as $color => $c) {
-            $xml->addChild($color, $this->getAttribute($color));
-        }
-        foreach (self::_getMessages() as $message => $m) {
-            $xml->addChild($message, $this->getAttribute($message) ?: $translation->getAttribute($message));
-        }
-        foreach (self::_getActions() as $action => $a) {
-            $xml->addChild($action, $this->getAttribute($action));
-        }
-        $questions = $this->getAttribute('questions');
-        $xqs = $xml->addChild('questions');
-        foreach ($questions as $question) {
-            if (!isset($question['type'])) {
-                $question['type'] = 'multiple';
-            }
-            if (!isset($question['required'])) {
-                $question['required'] = true;
-            }
-            if (!isset($question['count_for_score'])) {
-                $question['count_for_score'] = true;
-            }
-            $xq = $xqs->addChild('question');
-            if ($question['multiple']) {
-                $xq->addAttribute('multiple', '1');
-            }
-            $xq->addAttribute('required', $question['required'] ? '1' : '0');
-            $xq->addAttribute('count', $question['count_for_score'] ? '1' : '0');
-            $xq->addAttribute('type', $question['type']);
-            $xq->addAttribute('min_score', $question['min_score']);
-            $xq->addChild('label', htmlspecialchars($question['question']));
-            if ($question['type'] === 'multiple') {
-                $xas = $xq->addChild('answers');
-                foreach ($question['answers'] as $answer) {
-                    $xa = $xas->addChild('answer', htmlspecialchars($answer['answer']));
-                    if ($answer['correct']) {
-                        $xa->addAttribute('correct', '1');
-                    }
-                }
-            } else {
-                $xq->addAttribute('placeholder', htmlspecialchars($question['placeholder']));
-            }
-            $xq->addChild('correction', htmlspecialchars($question['explaination']));
-        }
-        file_put_contents($dest . '/data.xml', tidy_repair_string($xml->asXML(), ['input-xml' => 1, 'indent' => 1, 'wrap' => 0]));
+        file_put_contents($dest . '/data.js', 'var DATA=' . json_encode($this->getData()) . ';');
 
         if ($this->getAttribute('scorm')) {
             $title = htmlspecialchars($this->getAttribute('title'));
@@ -347,6 +282,39 @@ class Quiz extends CubistMagicAbstractModel
         }
     }
 
+    public function getData()
+    {
+        $data = $this->getPageData();
+        $d = $data->getRawData();
+
+        // Create data.js
+        $d['translations'] = [];
+        $tid = $data->get('translation', 1) ?? 1;
+        if ($tid === 'en') {
+            $tid = 1;
+        }
+        $translation = QuizTranslation::find($tid);
+        foreach (QuizTranslation::getTexts() as $text => $default) {
+            $d['translations'][$text] = $translation->getAttribute($text);
+        }
+
+        // Fix boolean
+        $booleans = ['multiple', 'required', 'count_for_score'];
+        foreach ($d['questions'] as $qn => $q) {
+            foreach ($booleans as $b) {
+                $d['questions'][$qn][$b] = !!($q[$b]);
+            }
+        }
+
+        // Unnull
+        foreach ($d as $k => $v) {
+            if (is_null($v)) {
+                $d[$k] = '';
+            }
+        }
+        return $d;
+    }
+
     public static function getMessages()
     {
         return self::_getMessages();
diff --git a/resources/quiz/index.html b/resources/quiz/index.html
index 3358ee128..00815481f 100644
--- a/resources/quiz/index.html
+++ b/resources/quiz/index.html
@@ -8,14 +8,6 @@
     <meta name="height" content="768">
     <title></title>
     <link type="text/css" rel="stylesheet" href="style/style.css">
-    <script type="text/javascript" src="js/polyfill/cssvars.js"></script>
-    <script type="text/javascript" src="js/libs/jquery.min.js"></script>
-    <script type="text/javascript" src="js/libs/jquery.scrollTo.min.js"></script>
-    <script type="text/javascript" src="js/libs/gsap/TweenMax.min.js"></script>
-    <script type="text/javascript" src="js/libs/gsap/jquery.gsap.min.js"></script>
-    <script type="text/javascript" src="js/libs/scorm/apiwrapper.js"></script>
-    <script type="text/javascript" src="js/scorm.js"></script>
-    <script type="text/javascript" src="js/main.js"></script>
 </head>
 <body>
 <div id="holder">
@@ -28,5 +20,14 @@
     <main>
     </main>
 </div>
+<script src="data.js"></script>
+<script src="js/polyfill/cssvars.js"></script>
+<script src="js/libs/jquery.min.js"></script>
+<script src="js/libs/jquery.scrollTo.min.js"></script>
+<script src="js/libs/gsap/TweenMax.min.js"></script>
+<script src="js/libs/gsap/jquery.gsap.min.js"></script>
+<script src="js/libs/scorm/apiwrapper.js"></script>
+<script src="js/scorm.js"></script>
+<script src="js/main.js"></script>
 </body>
 </html>
diff --git a/resources/quiz/js/main.js b/resources/quiz/js/main.js
index bda41f69c..b5f17f34e 100644
--- a/resources/quiz/js/main.js
+++ b/resources/quiz/js/main.js
@@ -3,19 +3,11 @@
         var data;
         var score;
         var questionStatus = {};
-        $.ajax(
-            {
-                url: 'data.xml',
-                dataType: 'xml',
-                success: xmlLoaded,
-                error: function () {
-
-                }
-            }
-        );
 
         $(window).on('resize', resize);
 
+        initContents();
+
         function resize() {
             // Window size that reserve enough space for all questions and avoid scroll jumps
             var maxHeight = 0;
@@ -49,13 +41,8 @@
             }
         }
 
-        function xmlLoaded(d) {
-            data = $(d);
-            initContents();
-        }
-
         function getTranslation(key) {
-            return $(data).find('translations ' + key).text();
+            return DATA.translations[key];
         }
 
         function resizeContainer() {
@@ -72,38 +59,27 @@
         }
 
         function initContents() {
-
-            if ($(data).find('title').length > 0) {
-                var title = $(data).find('title:eq(0)').text();
-                $("header .headerholder .titleHolder").append('<h1>' + title + '</h1>');
-                $("header .headerholder .titleHolder h1").css('width', '99%');
-                $("title").text(title);
-            }
-
-            var mainColor = '#e7007a';
-            if ($(data).find('mainColor').length > 0) {
-                mainColor = $(data).find('mainColor').text();
-            }
-            document.documentElement.style.setProperty('--main-color', mainColor);
-            document.documentElement.style.setProperty('--header-overlay', $(data).find('overlay').text());
-            document.documentElement.style.setProperty('--ok-color', $(data).find('okColor').text());
-            document.documentElement.style.setProperty('--nok-color', $(data).find('nokColor').text());
-            document.documentElement.style.setProperty('--review-background', $(data).find('reviewBackground').text());
-            $('head').append('<style>:root{--main-color:' + mainColor + ';}</style>');
+            $("header .headerholder .titleHolder").append('<h1>' + DATA.title + '</h1>');
+            $("header .headerholder .titleHolder h1").css('width', '99%');
+            $("title").text(DATA.title);
+
+            document.documentElement.style.setProperty('--main-color', DATA.mainColor);
+            document.documentElement.style.setProperty('--header-overlay', DATA.overlay);
+            document.documentElement.style.setProperty('--ok-color', DATA.okColor);
+            document.documentElement.style.setProperty('--nok-color', DATA.nokColor);
+            document.documentElement.style.setProperty('--review-background', DATA.reviewBackground);
+            $('head').append('<style>:root{--main-color:' + DATA.mainColor + ';}</style>');
             cssVars({});
 
-            var rev = $(data).find('review');
-            showReview = rev.text();
+            showReview = DATA.review;
             threshold = 0;
-            instantReview = $(data).find('instantReview').text() === '1';
-            logAttempts = $(data).find('logattempts').text() === '1';
-            displayScore = $(data).find('display_score').text() === '1';
-
-            if ($(data).find('threshold').length > 0 && !isNaN(parseFloat($(data).find('threshold').text()))) {
-                threshold = parseFloat($(data).find('threshold').text());
-                if (threshold > 1) {
-                    threshold /= 100;
-                }
+            instantReview = DATA.instantReview;
+            logAttempts = DATA.logattempts;
+            displayScore = DATA.display_score;
+
+            threshold = DATA.threshold;
+            if (threshold > 1) {
+                threshold /= 100;
             }
 
             // Create quiz container
@@ -115,49 +91,51 @@
             var qn = 1;
             countQuestions = 0;
             // Create questions
-            $(data).find('questions question').each(function () {
-                if ($(this).attr('count') == '1') {
+            $.each(DATA.questions, function (k, question) {
+                console.log(question);
+                if (question.count) {
                     countQuestions++;
                 }
-                var type = $(this).attr('type');
-                var multiple = $(this).attr('multiple') == '1';
-                var multipleclass = multiple ? ' multiple' : '';
-                var question = '<section class="question' + multipleclass + '" data-count="' + $(this).attr('count') + '" data-q="' + qn + '" data-min-score="' + $(this).attr('min_score') + '" data-type="' + type + '">';
-                question += '<div class="label"><h3>' + sprintf(getTranslation('question'), qn) + '</h3> ' + $(this).find('label').text() + '</div>';
-                question += '<div class="answers">';
-                question += '</div>';
-                if (multiple) {
-                    question += '<a href="#" class="button validatemulti">' + getTranslation('validateAnswer') + '</a>';
-                } else if (type !== 'multiple') {
-                    question += '<a href="#" class="button validatemulti">' + getTranslation('validateAnswerSingular') + '</a>';
+
+                var multipleclass = question.multiple ? ' multiple' : '';
+                var questionHtml = '<section class="question' + multipleclass + '" data-count="' + question.count + '" data-q="' + qn + '" data-min-score="' + question.min_score + '" data-type="' + question.type + '">';
+                questionHtml += '<div class="label"><h3>' + sprintf(getTranslation('question'), qn) + '</h3> ' + question.question + '</div>';
+                questionHtml += '<div class="answers">';
+                questionHtml += '</div>';
+                if (question.multiple) {
+                    questionHtml += '<a href="#" class="button validatemulti">' + getTranslation('validateAnswer') + '</a>';
+                } else if (question.type !== 'multiple') {
+                    questionHtml += '<a href="#" class="button validatemulti">' + getTranslation('validateAnswerSingular') + '</a>';
                 }
-                question += '</section>';
+                questionHtml += '</section>';
 
-                var questionCorrection = $(this).find('correction').text();
+                var questionCorrection = question.correction;
                 if (questionCorrection === '') {
                     var c = [];
-                    $(this).find('answer[correct=1]').each(function () {
-                        c.push($(this).text());
-                    })
+                    $.each(function (kk, answer) {
+                        if (answer.correct) {
+                            c.push(answer.answer);
+                        }
+                    });
                     questionCorrection = c.join('<br>');
                 }
 
-                var c = '<div class="correction" data-i="' + qn + '"><div class="badge"></div><h4>' + sprintf(getTranslation('question'), qn) + ' ' + $(this).find('label').text() + '</h4><p>' + questionCorrection + '</p></div>';
+                var c = '<div class="correction" data-i="' + qn + '"><div class="badge"></div><h4>' + sprintf(getTranslation('question'), qn) + ' ' + question.question + '</h4><p>' + questionCorrection + '</p></div>';
                 $(correction).append(c);
 
-                var q = $(question);
-                var required = $(q).attr('required') === '1' ? 'required' : '';
+                var q = $(questionHtml);
+                var required = question.required === 1 ? 'required' : '';
 
                 // Append answers
                 var holder = $('<div class="holder"></div>');
-                if (type === 'multiple') {
+                if (question.type === 'multiple') {
                     var an = 0;
                     var correctCount = 0;
 
-                    $(this).find('answer').each(function () {
-                        var a = $('<div class="answer-holder"><div class="answer" data-a="' + an + '">' + $(this).text() + '</div></div>');
+                    $.each(question.answers, function (aa, answer) {
+                        var a = $('<div class="answer-holder"><div class="answer" data-a="' + an + '">' + answer.answer + '</div></div>');
                         // Set correct tag
-                        var correct = $(this).attr('correct') == '1' ? 1 : 0;
+                        var correct = answer.correct ? 1 : 0;
                         correctCount += correct;
                         $(a).find('.answer').attr('data-correct', correct);
                         $(holder).append($(a));
@@ -167,10 +145,13 @@
                     if (correctCount > 1 || $(this).attr('multiple') !== undefined) {
                         q.addClass('multiple');
                     }
-                } else if (type === 'text' || type === "email") {
-                    $(holder).append('<input ' + required + ' type="' + type + '" name="answer" class="focusme" placeholder="' + $(this).attr('placeholder') + '" />')
-                } else if (type === 'textarea') {
-                    $(holder).append('<textarea ' + required + ' name="answer" class="focusme" placeholder="' + $(this).attr('placeholder') + '"></textarea>')
+                } else if (question.type === 'text' || question.type === "email") {
+                    $(holder).append('<input ' + required + ' type="' + question.type + '" name="answer" class="focusme" placeholder="' + question.placeholder + '" />')
+                } else if (question.type === 'textarea') {
+                    $(holder).append('<textarea ' + required + ' name="answer" class="focusme" placeholder="' + question.placeholder + '"></textarea>')
+                } else if (question.type === 'country') {
+                    var select = '<select name="answer" class="focusme"></select>';
+                    $(holder).append(select);
                 }
 
                 $(q).find('.answers').append($(holder));
@@ -180,12 +161,12 @@
                 qn++;
             });
 
-            var defaultMessage = $(data).find('defaultMessage').length > 0 && $(data).find('defaultMessage').text() !== '' ? $(data).find('defaultMessage').text() : 'You have finished the quiz!';
-            var passedMessage = $(data).find('passedMessage').length > 0 && $(data).find('passedMessage').text() !== '' ? $(data).find('passedMessage').text() : defaultMessage;
-            var failedMessage = $(data).find('failedMessage').length > 0 && $(data).find('failedMessage').text() !== '' ? $(data).find('failedMessage').text() : defaultMessage;
+            var defaultMessage = DATA.defaultMessage !== '' ? DATA.defaultMessage : 'You have finished the quiz!';
+            var passedMessage = DATA.passedMessage !== '' ? DATA.passedMessage : defaultMessage;
+            var failedMessage = DATA.failedMessage !== '' ? DATA.failedMessage : defaultMessage;
 
-            passedAction = $(data).find('passedAction').length > 0 && $(data).find('passedAction').text() !== '' ? $(data).find('passedAction').text() : null;
-            failedAction = $(data).find('failedAction').length > 0 && $(data).find('failedAction').text() !== '' ? $(data).find('failedAction').text() : null;
+            passedAction = DATA.passedAction !== '' ? DATA.passedAction : null;
+            failedAction = DATA.failedAction !== '' ? DATA.failedAction : null;
 
             var results = '<section id="resultsscreen">';
             results += '<div id="results">';