FillInContentEditor/index.html at master · MicroContent/FillInContentEditor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FillInEditor</title>
    <script type="application/javascript">
        function init() {
            window.data = getData();
            setDataGetter(dataGetter)
        }
    </script>
</head>
<body>
    <div id="content">
        Text Template should be formated like "Every one [loves | likes] microlearning [cards]."
        Text in brackets = fill in input. Multiple possibilities should be seperated by '|' .
        <p>
            <label for="titleInput">Enter Title:</label>
            <input id="titleInput" type="text" />
        </p>
        <p>
            <label for="fillintext">Text to fill in:</label>
            <textarea id="fillintext" type="text"></textarea>
        </p>
        <p>
            <label for="hintInput">Enter hint:</label>
            <textarea id="hintInput"></textarea>
        </p>
        <p>
            <label for="explanationInput">Enter explanation:</label>
            <textarea id="explanationInput"></textarea>
         </p>
    </div>
    <script type="application/javascript">
        function dataGetter() {
            var lastEdit = Date.now();

            return {
                // return data object
                title: document.getElementById('titleInput').value,
                priority: 1,
                type: 'FillIN',
                fillintext: document.getElementById('fillintext').value,
                questionContext: document.getElementById('hintInput').value,
                answerContext: document.getElementById('explanationInput').value,
                lastEdit: lastEdit,
                answers: extractAnswersToArray(document.getElementById('fillintext').value),
                id: 0,
                lessonId: 0,
                releaseStatus: 'PUBLIC',
                editable: null,
                learningStatus: 0,
                skipStatus: 'NEVER_SKIPPABLE',
                multimedia: [],
                // preview metadata
                description: replacePossibleAnswers(document.getElementById('fillintext').value)
            }
        }
        function replacePossibleAnswers (string) {
            var re = /\[(.*?)\]/g;
            var toReplace = string.match(re);
            var emptyArray = []

            if (toReplace == null) return string;

            for (var i = 0; i<toReplace.length; i++) {
                string = string.replace(toReplace[i], "(" + (i+1) + ")")
            }
            //if (extractAnswersToArray(string).length == 0 ) return emptyArray;
            return string;
        }

        function extractAnswersToArray (string) {
            var a = [];
            var re = /\[(.*?)\]/g;
            if (string.match(re)==null) return [];
            return string.match(re).map(function(e){ return e.replace(/[\[\]']+/g,"").split('|').map(function(e1){ return e1.trim()})})
        }

        init();
        document.getElementById('titleInput').value = window.data.title;
        document.getElementById('fillintext').value = window.data.fillintext;
        document.getElementById('hintInput').value = window.data.questionContext;
        document.getElementById('explanationInput').value = window.data.answerContext;
    </script>
</body>
</html>