187 lines
8.7 KiB
HTML
187 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Создать опрос</title>
|
||
<!-- Добавляем проверку на различные пути -->
|
||
<script>
|
||
// Определяем путь к статическим файлам с учетом prod и dev окружений
|
||
function getStaticPath() {
|
||
if (window.location.pathname.includes('/ms/questioneer')) {
|
||
// Для продакшна
|
||
return '/ms/questioneer/static';
|
||
} else {
|
||
// Для локальной разработки
|
||
const basePath = window.location.pathname.split('/create')[0];
|
||
// Проверяем, заканчивается ли путь на слеш
|
||
return basePath + (basePath.endsWith('/') ? 'static' : '/static');
|
||
}
|
||
}
|
||
|
||
// Динамически добавляем CSS
|
||
const cssLink = document.createElement('link');
|
||
cssLink.rel = 'stylesheet';
|
||
cssLink.href = getStaticPath() + '/css/style.css';
|
||
document.head.appendChild(cssLink);
|
||
</script>
|
||
|
||
<!-- Добавляем jQuery и остальные скрипты с учетом переменного пути -->
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Динамически добавляем скрипты
|
||
const scriptPaths = [
|
||
'/js/common.js',
|
||
'/js/create.js'
|
||
];
|
||
|
||
const staticPath = getStaticPath();
|
||
scriptPaths.forEach(path => {
|
||
const script = document.createElement('script');
|
||
script.src = staticPath + path;
|
||
document.body.appendChild(script);
|
||
});
|
||
});
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<!-- Навигационная шапка -->
|
||
<header class="nav-header">
|
||
<div class="nav-container">
|
||
<a href="javascript:;" id="nav-home-link" class="nav-logo">Анонимные опросы</a>
|
||
<nav class="nav-menu">
|
||
<a href="javascript:;" id="nav-main-link" class="nav-link">Главная</a>
|
||
<a href="javascript:;" id="nav-create-link" class="nav-link active">Создать опрос</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="container">
|
||
<h1>Создание нового опроса</h1>
|
||
|
||
<div class="form-container">
|
||
<form id="create-questionnaire-form">
|
||
<div class="form-group">
|
||
<label for="title">Название опроса *</label>
|
||
<input type="text" id="title" name="title" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="description">Описание опроса</label>
|
||
<textarea id="description" name="description"></textarea>
|
||
</div>
|
||
|
||
<div class="form-group" style="display: none;">
|
||
<label for="display-type">Тип отображения</label>
|
||
<select id="display-type" name="display-type">
|
||
<option value="step_by_step">Пошаговый</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="questions-container">
|
||
<h2>Вопросы</h2>
|
||
<div id="questions-list"></div>
|
||
|
||
<button type="button" id="add-question" class="btn btn-small">Добавить вопрос</button>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<a href="/questioneer" class="btn btn-secondary">Отмена</a>
|
||
<button type="submit" class="btn btn-primary">Создать опрос</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Шаблон для вопроса -->
|
||
<template id="question-template">
|
||
<div class="question-item" data-index="{{index}}">
|
||
<div class="question-header">
|
||
<h3>Вопрос {{number}}</h3>
|
||
<button type="button" class="btn-icon delete-question">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
|
||
<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="question-text-{{index}}">Текст вопроса *</label>
|
||
<input type="text" id="question-text-{{index}}" class="question-text" name="questions[{{index}}][text]" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="question-type-{{index}}">Тип вопроса *</label>
|
||
<select id="question-type-{{index}}" class="question-type-select" name="questions[{{index}}][type]" required>
|
||
<option value="single_choice">Одиночный выбор</option>
|
||
<option value="multiple_choice">Множественный выбор</option>
|
||
<option value="text">Текстовый ответ</option>
|
||
<option value="scale">Шкала оценки</option>
|
||
<option value="tag_cloud">Облако тегов</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" name="questions[{{index}}][required]" value="true">
|
||
Обязательный вопрос
|
||
</label>
|
||
</div>
|
||
|
||
<div class="options-container" id="options-container-{{index}}">
|
||
<h4>Варианты ответа</h4>
|
||
<div class="options-list" id="options-list-{{index}}"></div>
|
||
<button type="button" class="btn btn-small add-option" data-question-index="{{index}}">Добавить вариант</button>
|
||
</div>
|
||
|
||
<div class="scale-container" id="scale-container-{{index}}" style="display: none;">
|
||
<h4>Настройки шкалы</h4>
|
||
<div class="form-group">
|
||
<label for="scale-min-{{index}}">Минимальное значение</label>
|
||
<input type="number" id="scale-min-{{index}}" class="scale-min" name="questions[{{index}}][scaleMin]" value="0" min="0">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="scale-max-{{index}}">Максимальное значение</label>
|
||
<input type="number" id="scale-max-{{index}}" class="scale-max" name="questions[{{index}}][scaleMax]" value="10" min="1" max="20">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="scale-min-label-{{index}}">Подпись минимального значения</label>
|
||
<input type="text" id="scale-min-label-{{index}}" class="scale-min-label" name="questions[{{index}}][scaleMinLabel]" value="Минимум">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="scale-max-label-{{index}}">Подпись максимального значения</label>
|
||
<input type="text" id="scale-max-label-{{index}}" class="scale-max-label" name="questions[{{index}}][scaleMaxLabel]" value="Максимум">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Шаблон для варианта ответа -->
|
||
<template id="option-template">
|
||
<div class="option-item" data-index="{{optionIndex}}">
|
||
<input type="text" name="questions[{{questionIndex}}][options][{{optionIndex}}][text]" placeholder="Вариант ответа">
|
||
<button type="button" class="btn-icon delete-option">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// Добавляем корректные пути к ссылкам после загрузки страницы
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Определяем базовый путь с учетом /ms в продакшен-версии
|
||
const isMsPath = window.location.pathname.includes('/ms/questioneer');
|
||
const basePath = isMsPath ? '/ms/questioneer' : '/questioneer';
|
||
|
||
// Устанавливаем правильные ссылки
|
||
document.getElementById('nav-home-link').href = basePath;
|
||
document.getElementById('nav-main-link').href = basePath;
|
||
document.getElementById('nav-create-link').href = basePath + '/create';
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |