mirror of
https://github.com/olehomelchenko/minivlat-local-ua.git
synced 2025-12-21 21:22:24 +00:00
init
This commit is contained in:
18
public/consent.html
Normal file
18
public/consent.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Consent Page</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Consent Form</h1>
|
||||
<p>Please read the following consent information carefully before proceeding:</p>
|
||||
<p>Your participation in this quiz is voluntary, and you can withdraw at any time. Your responses will be kept confidential.</p>
|
||||
<button id="consentButton">I Consent to Participate</button>
|
||||
</div>
|
||||
<script src="js/consent.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
36
public/index.html
Normal file
36
public/index.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="uk">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Consent Page</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="js/app.js" defer></script>
|
||||
<script src="js/consent.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Згода на участь в дослідженні</h1>
|
||||
<p>
|
||||
Запрошуємо взяти участь в дослідженні з адаптації інструменту оцінки грамотності в візуалізації даних, яке проводять викладачі та студенти Київської школи економіки.
|
||||
</p>
|
||||
<p>
|
||||
Мета дослідження полягає в адаптації інструменту, який вимірює, наскільки вдало люди можуть розуміти, інтерпретувати та використовувати дані, що містяться в візуалізаціях (графіки, діаграми тощо), для вирішення повсякденних проблем.
|
||||
</p>
|
||||
<p>
|
||||
Вам буде запропоновано 12 різних типів візуалізацій даних. Кожен з них буде супроводжений запитанням, відповідь на яке потрібно дати, засновуючись на інформації що отримана із візуалізації. Мова опитування буде обрана випадковим чином із двох: українська або англійська. Оберіть відповідь, яку вважаєте найточнішою. Якщо ви не впевнені, оберіть “пропустити” замість того щоб вгадувати. На кожне запитання ви маєте 25 секунд для відповіді. Якщо ви не встигли відповісти, тест автоматично перейде до наступного запитання.
|
||||
</p>
|
||||
<p>
|
||||
Після надання відповідей ми попросимо вас також заповнити коротку демографічну анкету. Дані, що ми зберемо протягом опитування, є анонімними та не зможуть бути використані для ідентифікації вашої особи. Вони будуть використані в поточному та подальших дослідженнях грамотності в сфері візуалізації даних. Ці дані можуть бути передані іншим дослідникам/цям, що проводять дослідження в цій або суміжних сферах. Також вони будуть опубліковані в репозиторіях для ширшого доступу наукової спільноти.
|
||||
</p>
|
||||
<p>
|
||||
Якщо ви маєте будь-які питання щодо змісту та деталей дослідження, звʼяжіться з Олегом Омельченком o_omelchenko@kse.org.ua.
|
||||
</p>
|
||||
<p>
|
||||
Дякуємо за допомогу в проведенні дослідження!
|
||||
</p>
|
||||
|
||||
<button id="consentButton">Погоджуюсь з умовами, розпочати тест</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
101
public/questionnaire.html
Normal file
101
public/questionnaire.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Questionnaire</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Анкета учасника(ці)</h1>
|
||||
<div id="error-message" style="display: none; color: red; margin-bottom: 1rem;"></div>
|
||||
<form id="questionnaire-form">
|
||||
<label for="age">Вік:</label>
|
||||
<input type="number" id="age" name="age" required min="10" max="100">
|
||||
|
||||
<label for="gender">Ґендер:</label>
|
||||
<select id="gender" name="gender" required>
|
||||
<option value="" selected disabled></option>
|
||||
<option value="male">Чоловік</option>
|
||||
<option value="female">Жінка</option>
|
||||
<option value="other">Небінарна персона / Інше</option>
|
||||
<option value="prefer_not_to_say">Не бажаю відповідати</option>
|
||||
</select>
|
||||
|
||||
<label for="education">Найвищий здобутий рівень освіти:</label>
|
||||
<select id="education" name="education" required>
|
||||
<option value="" selected disabled></option>
|
||||
<option value="highschool">Середня школа</option>
|
||||
<option value="bachelors">Бакалавр</option>
|
||||
<option value="masters">Магістр</option>
|
||||
<option value="doctorate">Доктор наук</option>
|
||||
</select>
|
||||
|
||||
<label for="color-blind">Чи маєте ви дальтонізм (кольорову сліпоту)?</label>
|
||||
<select id="color-blind" name="color-blind" required>
|
||||
<option value="" selected disabled></option>
|
||||
<option value="yes">Так</option>
|
||||
<option value="no">Ні</option>
|
||||
<option value="maybe">Не бажаю відповідати</option>
|
||||
</select>
|
||||
|
||||
<label for="familiarity">Ваш досвід роботи з візуалізацією даних:</label>
|
||||
<select id="familiarity" name="familiarity" required>
|
||||
<option value="" selected disabled></option>
|
||||
<option value="not_familiar">Я ніколи не працював професійно з візуалізацією даних</option>
|
||||
<option value="somewhat">Я дещо знайомий з візуалізацією даних</option>
|
||||
<option value="very_familiar">Я сам створював візуалізації даних</option>
|
||||
</select>
|
||||
|
||||
<label for="english-level">Рівень англійської мови:</label>
|
||||
<select id="english-level" name="english-level" required>
|
||||
<option value="" selected disabled></option>
|
||||
<option value="beginner">Початковий</option>
|
||||
<option value="intermediate">Середній</option>
|
||||
<option value="advanced">Високий</option>
|
||||
<option value="native">Рідна мова</option>
|
||||
</select>
|
||||
|
||||
<label for="ukrainian-level">Рівень української мови:</label>
|
||||
<select id="ukrainian-level" name="ukrainian-level" required>
|
||||
<option value="" selected disabled></option>
|
||||
<option value="beginner">Початковий</option>
|
||||
<option value="intermediate">Середній</option>
|
||||
<option value="advanced">Високий</option>
|
||||
<option value="native">Рідна мова</option>
|
||||
</select>
|
||||
|
||||
<label for="visualization-difficulty">Наскільки складно вам було сприймати зміст візуалізацій (графіків):</label>
|
||||
<select id="visualization-difficulty" name="visualization-difficulty" required>
|
||||
<option value="" selected disabled></option>
|
||||
<option value="easy">Легко</option>
|
||||
<option value="moderate">Помірно</option>
|
||||
<option value="difficult">Важко</option>
|
||||
</select>
|
||||
|
||||
<label for="quiz-difficulty">Наскільки складно вам було сприймати зміст питань тесту:</label>
|
||||
<select id="quiz-difficulty" name="quiz-difficulty" required>
|
||||
<option value="" selected disabled></option>
|
||||
<option value="easy">Легко</option>
|
||||
<option value="moderate">Помірно</option>
|
||||
<option value="difficult">Важко</option>
|
||||
</select>
|
||||
|
||||
<label for="kse-affiliation">Ви студент(ка), викладач(ка)/співробітник(ця) Київської школи економіки?</label>
|
||||
<select id="kse-affiliation" name="kse-affiliation" required>
|
||||
<option value="" selected disabled></option>
|
||||
<option value="neither">Ні</option>
|
||||
<option value="student">Студент(ка)</option>
|
||||
<option value="teacher_employee">Викладач(ка)/Співробітник(ця)</option>
|
||||
</select>
|
||||
|
||||
<label for="comments">Додаткові коментарі:</label>
|
||||
<textarea id="comments" name="comments" rows="4"></textarea>
|
||||
|
||||
<button type="submit">Надіслати</button>
|
||||
</form>
|
||||
</div>
|
||||
<script src="js/questionnaire.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
27
public/quiz.html
Normal file
27
public/quiz.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Quiz</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="js/quiz.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="quiz-container">
|
||||
<div id="timer">Time remaining: <span id="time">25</span>s</div>
|
||||
<div id="quiz" style="display: flex;">
|
||||
<div id="chart" style="flex: 1; display: flex; justify-content: center; align-items: center;"></div>
|
||||
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
||||
<div id="question-text"></div>
|
||||
<div id="options"></div>
|
||||
<!-- Removed submit button -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="results"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
30
public/results.html
Normal file
30
public/results.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="uk">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Результати тесту</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 id="results-header"></h1>
|
||||
<div class="results">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Питання</th>
|
||||
<th>Тип діаграми</th>
|
||||
<th>Коректність</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="results-table-body">
|
||||
<!-- Dynamic content will be inserted here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button onclick="window.location.href='index.html'">Повернутися на головну</button>
|
||||
</div>
|
||||
<script src="js/results.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user