SimpleSortingContentEditor/index.html at master · MicroContent/SimpleSortingContentEditor · 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SimpleSortingEditor</title>
    <script type="application/javascript">
        function init() {
            window.data = getData();
            setDataGetter(dataGetter)
        }
    </script>
</head>
<body>
    <div id="content">
        <p>
            <label for="titleInput">Enter Title:</label>
            <input id="titleInput" type="text" />
        </p>
        <p>
            <label for="questionInput">Enter question:</label>
            <input id="questionInput" type="text"/>
        </p>
            <button id="addMore">Add more</button>
        <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">
        var numAnswers = 0;
        var addMoreButton = document.getElementById("addMore");

        addMoreButton.onclick = function() {
            if (countAnswers() > 8) addMoreButton.style.visibility = "hidden";
            addMoreButton.parentNode.insertBefore(createAnswer(), addMoreButton);
        };

        function countAnswers () {
            return numAnswers;
        }

        function createAnswer () {
            var newAnswer = document.createElement("p");
            var label = document.createElement("label");
            var input = document.createElement("input");
            label.setAttribute("for","answer" + (countAnswers() + 1));
            label.innerHTML = countAnswers() + 1 + ": ";
            input.setAttribute("id","answer" + (countAnswers() + 1));
            input.setAttribute("type","text");
            newAnswer.appendChild(label);
            newAnswer.appendChild(input);
            numAnswers += 1;
            return newAnswer;
        }

        function dataGetter() {
            var lastEdit = Date.now();
            var answers = [];
            for (var i = 1; i <= countAnswers(); i++) {
                var value = document.getElementById('answer' + i).value;
                if (value !== undefined && value.length !== undefined && value.length > 0) {
                    answers.push({
                        value: value,
                        order: i,
                        lastEdit: lastEdit,
                        id: i
                    });
                }
            }
            return {
                // return data object
                title: document.getElementById('titleInput').value,
                priority: 1,
                type: 'SS',
                question: document.getElementById('questionInput').value,
                answers: answers,
                questionContext: document.getElementById('hintInput').value,
                answerContext: document.getElementById('explanationInput').value,
                lastEdit: lastEdit,
                id: 0,
                lessonId: 0,
                releaseStatus: 'PUBLIC',
                editable: null,
                learningStatus: 0,
                skipStatus: 'NEVER_SKIPPABLE',
                multimedia: [],
                // preview metadata
                description: document.getElementById('questionInput').value.replace(/<\/?[^>]+(>|$)/g, "")
                + "\n" + answers.map(function (e, i) {
                    return "(" + (i + 1) + ") " + e.value
                }).join("\n")
            }
        }

        init();

        if (window.data.answers.length == 0) {
                for (var i = 0; i < 5; i++) addMoreButton.parentNode.insertBefore(createAnswer(), addMoreButton);
            } else {
                for (var i = 0; i < window.data.answers.length; i++) addMoreButton.parentNode.insertBefore(createAnswer(), addMoreButton);
            }

        document.getElementById('titleInput').value = window.data.title;
        document.getElementById('questionInput').value = window.data.question;
        for (var i = 1; i <= window.data.answers.length; i++) {
            document.getElementById('answer' + i).value = window.data.answers[i - 1].value;
        }
        document.getElementById('hintInput').value = window.data.questionContext;
        document.getElementById('explanationInput').value = window.data.answerContext;
    </script>
</body>
</html>