222 lines
11 KiB
Plaintext
222 lines
11 KiB
Plaintext
|
<% if(it.layout_clean_mode) {%>
|
||
|
|
<% layout("../layouts/admin/Clean") %>
|
||
|
|
<% } else {%>
|
||
|
|
<% layout("../layouts/admin/Main") %>
|
||
|
|
<%}%>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<%~ includeFile("../partials/admin/Breadcrumb", it)%>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="tab-content m-xl-4 m-2">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
||
|
|
<%~ includeFile("../partials/admin/GlobalResponse.eta", it) %>
|
||
|
|
<div class="form-container card py-3">
|
||
|
|
<h5 class="primaryHeading2 mb-4 text-md-left pl-3">
|
||
|
|
<%= it.heading %>
|
||
|
|
</h5>
|
||
|
|
|
||
|
|
<form action="/admin/questions-add" method="POST" id="add-question-form">
|
||
|
|
|
||
|
|
|
||
|
|
<div class="form-group required col-xl-6 col-12 ">
|
||
|
|
<label for="quiz_id" class="control-label">Quiz</label>
|
||
|
|
|
||
|
|
<small class="text-muted">Can select one</small>
|
||
|
|
<select class="selectpicker custom-picker d-block w-100" data-style="btn-light" data-live-search="true" id="select-quiz_id" name="quiz_id" required onchange="questionSelectionChanged(this, event)">
|
||
|
|
<% it.quizzes.forEach(function(quiz) { %>
|
||
|
|
<option class="select_mapping_status_option" value="<%= quiz.id %>" data-last-order="<%= quiz.lastOrder ?? 1 %>">
|
||
|
|
<%= quiz.name %>
|
||
|
|
</option>
|
||
|
|
<% }) %>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group required col-xl-6 col-12">
|
||
|
|
<label for="order" class="control-label">Order</label>
|
||
|
|
|
||
|
|
<input type="number" class="form-control data-input disabled" disabled id="shown_number_order" value="<%= it.quizzes[0].lastOrder ? parseInt(it.quizzes[0].lastOrder) + 1 : 1 %>" step="1" min="1" />
|
||
|
|
<input type="number" required hidden class="form-control data-input disabled" id="number_order" name="order" value="<%= it.quizzes[0].lastOrder ? parseInt(it.quizzes[0].lastOrder) + 1 : 1 %>" step="1" min="1" />
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group required col-xl-6 col-12 ">
|
||
|
|
<label for="type" class="control-label">Type</label>
|
||
|
|
|
||
|
|
|
||
|
|
<small class="text-muted">Can select one</small>
|
||
|
|
<select class="selectpicker custom-picker d-block w-100" data-style="btn-light" data-live-search="true" id="select_mapping_type" name="type" required>
|
||
|
|
<% Object.keys(it.type_mapping()).forEach(function(prop) { %>
|
||
|
|
<% const same = it.form_fields["type"] == prop ? 'selected' : false %>
|
||
|
|
<option class="select_mapping_type_option<%= same ? '_' + same : '' %>" value="<%= prop %>" <%= same %>>
|
||
|
|
<%= it.type_mapping()[prop] %>
|
||
|
|
</option>
|
||
|
|
<% }) %>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group required col-xl-6 col-12 ">
|
||
|
|
<label for="question" class="control-label">Question</label>
|
||
|
|
|
||
|
|
|
||
|
|
<input type="text" required class="form-control data-input" id="text_question" name="question" value="<%= it.form_fields['question'] %>" />
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group col-xl-6 col-12" hidden id="image-dimensions">
|
||
|
|
<label for="image_dimensions" class="control-label">Image dimensions</label></br>
|
||
|
|
|
||
|
|
<div id="image-dimensions" class="d-flex flex-lg-row flex-column flex-lg-wrap col-lg-12 px-0 ">
|
||
|
|
<div class="d-flex mr-lg-2 flex-column px-0 col-lg col-12">
|
||
|
|
<label for="image-width">Width</label>
|
||
|
|
<input type="number" oninput="changeDimension('width',this)" class="form-control data-input" id="image-width" name="image_width" step="any" value="<%= it.form_fields['image_width'] %>" />
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="d-flex ml-lg-2 flex-column px-0 col-lg col-12">
|
||
|
|
<label for="image-height">Height</label>
|
||
|
|
<input type="number" oninput="changeDimension('height',this)" class="form-control data-input" id="image-height" name="image_width" step="any" value="<%= it.form_fields['image_height'] %>" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3">Demo box</div>
|
||
|
|
<div id="demo-box" style="width: <%= it.form_fields['image_width'] ? it.form_fields['image_width'] : 0 %>px; height: <%= it.form_fields['image_height'] ? it.form_fields['image_height'] : 0 %>px; border: 1px solid black;" class="mt-3 d-flex align-items-center justify-content-center text-center">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group col-xl-6 col-12">
|
||
|
|
<label for="note" class="control-label">Note</label>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<textarea class="form-control data-input" id="text_note" name="note" rows="3"><%= it.form_fields['note'] %></textarea>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group col-xl-6 col-12">
|
||
|
|
<label for="note_type" class="control-label">Note type</label>
|
||
|
|
|
||
|
|
|
||
|
|
<small class="text-muted">Can select one</small>
|
||
|
|
<select class="selectpicker custom-picker d-block w-100" data-style="btn-light" data-live-search="true" id="select_mapping_note_type" name="note_type">
|
||
|
|
<option class="select_mapping_note_type_option"></option>
|
||
|
|
|
||
|
|
<% Object.keys(it.note_type_mapping()).forEach(function(prop) { %>
|
||
|
|
<% const same = it.form_fields["note_type"] == prop ? 'selected' : false %>
|
||
|
|
<option class="select_mapping_note_type_option<%= same ? '_' + same : '' %>" value="<%= prop %>" <%= same %>>
|
||
|
|
<%= it.note_type_mapping()[prop] %>
|
||
|
|
</option>
|
||
|
|
<% }) %>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group col-xl-6 col-12 ">
|
||
|
|
<label for="depends_on" class="control-label">Depends on question</label></br>
|
||
|
|
<small class="text-muted">If you want this question to depend on another question answer fill these.</small>
|
||
|
|
|
||
|
|
<input type="text" hidden class="form-control data-input" id="text_depends_on" name="depends_on" />
|
||
|
|
|
||
|
|
<div id="depends-container" class="d-flex flex-lg-row flex-column flex-lg-wrap col-lg-12 px-0 ">
|
||
|
|
<div class="d-flex mr-lg-2 flex-column px-0 col-lg col-12">
|
||
|
|
<label for="depended_question_id">Question</label>
|
||
|
|
<select class="selectpicker custom-picker d-block w-100" data-style="btn-light" data-live-search="true" id="depended_question_id">
|
||
|
|
<option class="select_mapping_status_option" value=""></option>
|
||
|
|
<% it.questions.forEach(function(ques) { %>
|
||
|
|
<option class="select_mapping_status_option" value="<%= ques.id %>">
|
||
|
|
<%= ques.question %>
|
||
|
|
</option>
|
||
|
|
<% }) %>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex ml-lg-2 flex-column px-0 col-lg col-12">
|
||
|
|
<label for="depended_answer">Answer</label>
|
||
|
|
<input type="text" class="form-control data-input" id="depended_answer" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group col-xl-6 col-12" hidden id="slider-select">
|
||
|
|
<label for="slider_range" class="control-label">Slider range</label>
|
||
|
|
<input type="text" hidden class="form-control data-input" id="text_slider_range" name="slider_range" value="<%= it.form_fields['slider_range'] %>" />
|
||
|
|
<div id="slider-range-container" class="d-flex flex-lg-row flex-column flex-lg-wrap col-lg-12 px-0 ">
|
||
|
|
<div class="d-flex mr-lg-2 flex-column px-0 col-lg col-12">
|
||
|
|
<label for="min-slide-range">Min</label>
|
||
|
|
<input type="number" class="form-control data-input" id="min-slide-range" />
|
||
|
|
</div>
|
||
|
|
<div class="d-flex ml-lg-2 flex-column px-0 col-lg col-12">
|
||
|
|
<label for="max-slide-range">Max</label>
|
||
|
|
<input type="text" class="form-control data-input" id="max-slide-range" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group col-xl-6 col-12 ">
|
||
|
|
<label for="output_variable_name" class="control-label">Main output variable</label>
|
||
|
|
<small class="text-muted">Can select one</small>
|
||
|
|
<select class="selectpicker extra-output-var custom-picker d-block w-100" data-style="btn-light" data-live-search="true" name="output_variable_name" id="text_output_variable_name">
|
||
|
|
<option class="select_main_output_variable_option" value=""></option>
|
||
|
|
<% it.outputVariables.forEach(function(oVar) { %>
|
||
|
|
<option class="select_main_output_variable_option" value="<%= oVar.name %>">
|
||
|
|
<%= oVar.name %>
|
||
|
|
</option>
|
||
|
|
<% }) %>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group col-xl-6 col-12 ">
|
||
|
|
<label for="weight" class="control-label">Weight</label>
|
||
|
|
|
||
|
|
|
||
|
|
<input id="number_weight" name="weight" value="<%= it.form_fields['weight'] %>" class="form-control" type="number" min="0" />
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group col-xl-6 col-12" id="extra-outputs">
|
||
|
|
<label for="extra_output_variable" class="control-label">Extra output variables</label>
|
||
|
|
|
||
|
|
<input type="text" class="form-control data-input" hidden id="text_extra_output_variable" name="extra_output_variable" value="<%= it.form_fields['extra_output_variable'] %>" />
|
||
|
|
|
||
|
|
<div class="output-variable-container mb-2 d-flex flex-lg-row flex-column flex-lg-wrap col-lg-12 px-0 ">
|
||
|
|
<div class="d-flex mr-lg-2 flex-column px-0 col-lg col-12">
|
||
|
|
<label for="extra-output-var">Output variable</label>
|
||
|
|
<select class="selectpicker custom-picker d-block w-100 extra-output-var" id="extra-output-var" data-style="btn-light" data-live-search="true">
|
||
|
|
<option class="select_mapping_status_option" value=""></option>
|
||
|
|
<% it.outputVariables.forEach(function(oVar) { %>
|
||
|
|
<option class="select_mapping_status_option" value="<%= oVar.name %>">
|
||
|
|
<%= oVar.name %>
|
||
|
|
</option>
|
||
|
|
<% }) %>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex ml-lg-2 flex-column px-0 col-lg col-12">
|
||
|
|
<label for="extra-output-weight">Weight</label>
|
||
|
|
<input type="number" class="form-control data-input extra-output-weight" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="button" class="add-another-extra btn btn-success my-3" onclick="addExtraOutputVariable()">Add another extra</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group pl-3">
|
||
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
const outputVariables = [<% it.outputVariables.forEach(function(oVar) { %><%~ `'${oVar.name}',` %> <% }) %>];
|
||
|
|
</script>
|
||
|
|
<script src="/js/main.js?v=1.2"></script>
|