/
index.html
196 lines (172 loc) · 7.23 KB
/
index.html
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Редактор тестов</title>
<!-- Foundation CSS framework (Bootstrap and jQueryUI also supported) -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/bootstrap/3.2.0/css/bootstrap.css'>
<!-- Font Awesome icons (Bootstrap, Foundation, and jQueryUI also supported) -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/sceditor/1.4.3/jquery.sceditor.default.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/sceditor/1.4.3/themes/modern.min.css'>
<script src='https://cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/sceditor/1.4.3/jquery.sceditor.min.js'></script>
<script src='https://cdn.jsdelivr.net/sceditor/1.4.3/plugins/xhtml.js'></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="dist/jsoneditor.js"></script>
</head>
<body>
<div class='container'>
<div class='row' style='padding-bottom: 15px;'>
<div class='col-md-12'>
<h1>Редактор тестов</h1>
<p>
Данный сервис позволяет создавать и редактировать тесты для электронных учебников.
</p>
<ul>
<li>Нажмите "Открыть" для того чтобы открыть для редактирования файл теста</li>
<li>Нажмите "Сохранить" для сохранения теста в файл</li>
<li>Нажмите "Очистить" для очистки и создания нового теста</li>
</ul>
</div>
</div>
<div class='row' style='padding-bottom: 15px;'>
<div class='col-md-12'>
<label class="btn btn-info btn-file">
Открыть <input type='file' id='json_file' style="display: none;">
</label>
<button id='save_file' class='btn btn-info'>Сохранить</button>
<button id='restore' class='btn btn-info'>Очистить</button>
<span id='valid_indicator' class='label label-success'></span>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<div id='editor_holder'></div>
</div>
</div>
</div>
<script>
JSONEditor.defaults.theme = 'bootstrap3';
JSONEditor.defaults.iconlib = 'fontawesome4';
JSONEditor.plugins.sceditor.style = "https://cdn.jsdelivr.net/sceditor/1.4.3/jquery.sceditor.default.min.css";
var starting_value = {};
// Initialize the editor
var editor = new JSONEditor(document.getElementById('editor_holder'),{
ajax: true,
keep_oneof_values: false,
disable_collapse: true,
disable_array_delete_all_rows: true,
disable_array_delete_last_row: true,
disable_properties: true,
// The schema for the editor
schema: {
"type": "object",
"title": "Редактор тестов",
"properties": {
"name": {
"title": "Текст тестов",
"type": "string"
},
"tasks": {
"title": "Задания",
"type": "array",
"format": "tabs",
"items": {
"title": "Задание",
"headerTemplate": "Задание {{i1}}",
"oneOf": [{
"$ref": "tests/select_schema.json",
"title": "Выбор правильного варианта"
}, {
"$ref": "tests/concordance_schema.json",
"title": "Соответствие"
}, {
"$ref": "tests/concordance_img_schema.json",
"title": "Соответствие с изображениями"
}, {
"$ref": "tests/order_schema.json",
"title": "Сортировка"
}, {
"$ref": "tests/order_vert_schema.json",
"title": "Вертикальная сортировка"
}, {
"$ref": "tests/order_vert_img_schema.json",
"title": "Вертикальная сортировка с изображениями"
}, {
"$ref": "tests/checkbox_schema.json",
"title": "Выбор из нескольких"
}, {
"$ref": "tests/input_schema.json",
"title": "Ввод значения"
}, {
"$ref": "tests/drop_schema.json",
"title": "Классификация"
}, {
"$ref": "tests/drop_img_schema.json",
"title": "Классификация с изображениями"
}]
}
}
},
"required": [
"name",
"tasks"
]
},
// Seed the form with a starting value
startval: starting_value,
// Disable additional properties
no_additional_properties: true,
// Require all properties by default
required_by_default: true
});
document.getElementById('json_file').addEventListener('change',function() {
var file = this.files[0];
if (file.name.match(/\.(txt|json)$/)) {
var reader = new FileReader();
reader.onload = function() {
editor.setValue(JSON.parse(reader.result));
};
reader.readAsText(file);
} else {
alert("Файл не поддерживается, поддерживается только .txt или .json");
}
});
// Hook up the save_file button to log to the console
document.getElementById('save_file').addEventListener('click',function() {
var json = editor.getValue();
var blob = new Blob([JSON.stringify(json,null,2)], {
"type": "application/json"
});
var a = document.createElement("a");
a.download = 'test.json';
a.href = URL.createObjectURL(blob);
document.body.appendChild(a);
a.click();
});
// Hook up the Restore to Default button
document.getElementById('restore').addEventListener('click',function() {
editor.setValue(starting_value);
});
// Hook up the validation indicator to update its
// status whenever the editor changes
editor.on('change',function() {
// Get an array of errors from the validator
var errors = editor.validate();
var indicator = document.getElementById('valid_indicator');
// Not valid
if(errors.length) {
indicator.className = 'label label-danger'
indicator.textContent = "not valid";
}
// Valid
else {
indicator.className = 'label label-success'
indicator.textContent = "valid";
}
});
</script>
</body>
</html>