PoolSelectionContentEditor/index.html at master · MicroContent/PoolSelectionContentEditor · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PoolSelectionEditor</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>
        <p>
          Add items to the selection pool. Tick the checkbox if the item is a correct answer.
        </p>
        <p>
            <button id="addMore">Add item</button>
        </p>
        <p style="visibility: collapse">
            <label for="hintInput">Enter hint:</label>
            <textarea id="hintInput"></textarea>
        </p>
        <p style="visibility: collapse">
            <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() > 20) 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");
            var checkbox = document.createElement("input");
            checkbox.setAttribute("id", "correct" + (countAnswers() + 1));
            checkbox.setAttribute("type", "checkbox");
            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);
            newAnswer.appendChild(checkbox);
            numAnswers += 1;
            return newAnswer;
        }
        function dataGetter() {
            var lastEdit = Date.now();
            var items = [];
            for (var i = 1; i <= countAnswers(); i++) {
                var value = document.getElementById('answer' + i).value;
                if (value !== undefined && value.length !== undefined && value.length > 0) {
                    items.push({
                        text: value,
                        isCorrect: document.getElementById('correct'+i).checked,
                        lastEdit: lastEdit,
                        id: i
                    });
                }
            }
            return {
                // return data object
                title: document.getElementById('titleInput').value,
                question: document.getElementById('questionInput').value,
                items: items,
                questionContext: document.getElementById('hintInput').value,
                answerContext: document.getElementById('explanationInput').value,
                lastEdit: lastEdit,
                // preview metadata
                description: document.getElementById('questionInput').value.replace(/<\/?[^>]+(>|$)/g, "")
                + "\n" + items.map(function (e, i) {
                    return "(" + (i + 1) + ") " + e.text
                }).join("\n")
            }
        }
        init();

        if (window.data.items.length !== 0) {
          for (var i = 0; i < window.data.items.length; i++){
            addMoreButton.parentNode.insertBefore(createAnswer(), addMoreButton);
            document.getElementById('answer' + (i+1)).value = window.data.items[i].text;
            document.getElementById('correct' + (i+1)).checked = window.data.items[i].isCorrect;
          }
        }
        document.getElementById('titleInput').value = window.data.title;
        document.getElementById('questionInput').value = window.data.question;
        document.getElementById('hintInput').value = window.data.questionContext;
        document.getElementById('explanationInput').value = window.data.answerContext;
    </script>
</body>
</html>