sQuiz/newquiz.html

<!--
/**
 * /newquiz.html
 * @version 1.8
 * @desc Creating a new quiz
 * @author Fándly Gergő Zoltán (gergo@systemtest.tk, systemtest.tk)
 * @copy 2017 Fándly Gergő Zoltán
 * License:
    sQuiz for creating small jQuery based quizs in an implementable way
    Copyright (C) 2017  Fándly Gergő Zoltán

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
 **/
 -->

<button id="back" type="button" onclick="window.history.back()"><i class="fa fa-arrow-left" aria-hidden="true"></i> {{back}}</button>
<button type="button" onclick="screenfull.toggle()"><i class="fa fa-expand"></i></button>
<br>
<br>
<div id="newquizcontainer" class="container center">
    <form id="newquiz" onsubmit="function(e){ e.preventDefault() }">
        <h3>{{generalSettings}}</h3>
        <fieldset id="general">
            <p>{{name}}:</p>
            <input type="text" name="name" style="width: 90%" placeholder="{{name}}"><br>
            <p>{{desc}}:</p>
            <textarea name="description" placeholder="{{desc}}" style="width: 90%"></textarea><br>
            <p>{{timeLimitPerTest}}:</p>
            <div class="checkbox">
                <input type="checkbox" name="timeLimitPerTest" id="timeLimitPerTestCheckbox" onclick="toggleElement('input[name=timeLimitPerTestVal]')">
                <label for="timeLimitPerTestCheckbox"></label>
            </div>
            <br>
            <input type="number" name="timeLimitPerTestVal" style="width: 90%; display: none" placeholder="{{timeLimitPerTest}}" min=0><br>
            <p>{{timeLimit}}:</p>
            <div class="checkbox">
                <input type="checkbox" name="timeLimit" id="timeLimitCheckbox" onclick="toggleElement('input[name=timeLimitVal]')">
                <label for="timeLimitCheckbox"></label>
            </div>
            <br>
            <input type="number" name="timeLimitVal" style="width: 90%; display: none" placeholder="{{timeLimit}}" min=0><br>
            <p>{{submitOnline}}:</p>
            <div class="checkbox">
                <input type="checkbox" name="submitOnline" id="submitOnlineCheckbox" onclick="toggleElement('input[name=onlineTag]')">
                <label for="submitOnlineCheckbox"></label>
            </div>
            <br>
            <input type="text" name="onlineTag" style="width: 90%; display: none" placeholder="{{onlineTag}}"><br>
        </fieldset>
        <br>
        <br>
        <div id="questionSettings">
            <h3>{{questions}}</h3>
            <fieldset id="questions">
            </fieldset>
            <div id="appendNew">
                <p><b>{{appendNew}}</b></p>
                <button type="button" onclick="appendNewField('simpleQuestion')"><i class="fa fa-plus-circle"></i> {{simpleQuestion}}</button>
                <button type="button" onclick="appendNewField('simpleSelect')"><i class="fa fa-plus-circle"></i> {{simpleSelect}}</button>
                <button type="button" onclick="appendNewField('connectGraph')"><i class="fa fa-plus-circle"></i> {{connectGraph}}</button>
                <button type="button" onclick="appendNewField('fillIn')"><i class="fa fa-plus-circle"></i> {{fillIn}}</button>
                <button type="button" onclick="appendNewField('markOnMap')"><i class="fa fa-plus-circle"></i> {{markOnMap}}</button>
                <div id="newPrototypes" style="display: none">
                    <div data-type="simpleQuestion">
                        <button type="button" onclick="removeField(this)" class="red"><i class="fa fa-times-circle"></i> {{remove}}</button><br>
                        <p>{{type}}: {{simpleQuestion}}</p>
                        <input type="hidden" name="type" value="simpleQuestion">
                        <p>{{question}}:</p>
                        <input type="text" name="question" style="width: 90%">
                        <p>{{answer}}:</p>
                        <input type="text" name="answer" style="width: 90%">
                        <hr>
                    </div>
                    <div data-type="simpleSelect">
                        <button type="button" onclick="removeField(this)" class="red"><i class="fa fa-times-circle"></i> {{remove}}</button><br>
                        <p>{{type}}: {{simpleSelect}}</p>
                        <input type="hidden" name="type" value="simpleSelect">
                        <p>{{question}}:</p>
                        <input type="text" name="question" style="width: 90%">
                        <p>{{answers}}:</p>
                        <span>{{newSimpleSelect}}</span>
                        <fieldset name="answers">
                        </fieldset>
                        <button type="button" onclick="addNewAnswer(this)" data-append="<i class=&quot;fa fa-square fa-2x&quot; onclick=&quot;toggleGoodAnswer(this)&quot;></i> <input type=&quot;text&quot; name=&quot;answer&quot; data-correct=&quot;false&quot; style=&quot;width: 90%&quot;><button type=&quot;button&quot; class=&quot;red&quot; onclick=&quot;removeField(this)&quot;><i class=&quot;fa fa-times-circle&quot;></i> {{remove}}</button><br>"><i class="fa fa-plus-circle"></i> {{newAnswer}}</button>
                        <hr>
                    </div>
                    <div data-type="connectGraph">
                        <button type="button" onclick="removeField(this)" class="red"><i class="fa fa-times-circle"></i> {{remove}}</button><br>
                        <p>{{type}}: {{connectGraph}}</p>
                        <input type="hidden" name="type" value="connectGraph">
                        <p>{{objective}}:</p>
                        <input type="text" name="question" style="width: 90%">
                        <p>{{answers}}:</p>
                        <span>{{newConnectGraph}}</span>
                        <fieldset name="answers">
                        </fieldset>
                        <button type="button" onclick="addNewAnswer(this)" data-append="<input type=&quot;text&quot; name=&quot;pair1&quot; style=&quot;width: 40%&quot;> - <input type=&quot;text&quot; name=&quot;pair2&quot; style=&quot;width: 40%&quot;><button type=&quot;button&quot; class=&quot;red&quot; onclick=&quot;removeField(this)&quot;><i class=&quot;fa fa-times-circle&quot;></i> {{remove}}</button>"><i class="fa fa-plus-circle"></i> {{newField}}</button>
                        <hr>
                    </div>
                    <div data-type="fillIn">
                        <button type="button" onclick="removeField(this)" class="red"><i class="fa fa-times-circle"></i> {{remove}}</button><br>
                        <p>{{type}}: {{fillIn}}</p>
                        <input type="hidden" name="type" value="fillIn">
                        <p>{{objective}}:</p>
                        <input type="text" name="question" style="width: 90%">
                        <p>{{text}}:</p>
                        <span>{{newFillIn}}</span>
                        <textarea name="text" rows=10 style="width: 90%"></textarea><br>
                        <button type="button" onclick="addNewFillInField(this)" ><i class="fa fa-plus-circle"></i> {{newField}}</button>
                        <hr>
                    </div>
                    <div data-type="markOnMap">
                        <button type="button" onclick="removeField(this)" class="red"><i class="fa fa-times-circle"></i> {{remove}}</button><br>
                        <p>{{type}}: {{markOnMap}}</p>
                        <input type="hidden" name="type" value="markOnMap">
                        <p>{{objective}}:</p>
                        <input type="text" name="question" style="width: 90%">
                        <p>{{map}}:</p>
                        <span>{{newMarkOnMap}}</span><br>
                        <input type="file" accept="image/*" name="mapfile">
                        <input type="hidden" name="map">
                        <button type="button" onclick="loadMap(this)"><i class="fa fa-upload"></i> {{loadMap}}</button>
                        <p>{{markers}}:</p>
                        <div class="sq sq-mapArea" name="mapArea">
                            <img src="./res/no_map.jpg">
                            <div name="markers">
                            </div>
                        </div>
                        <br>
                        <button type="button" onclick="addNewMarker(this)" ><i class="fa fa-plus-circle"></i> {{newMarker}}</button>
                        <button type="button" class="red" onclick="removeMarker(this)" ><i class="fa fa-plus-circle"></i> {{removeMarker}}</button>
                        <hr>
                    </div>
                </div>
            </div>
        </div>
        <hr class="placeholder">
        <div id="export">
            <button type="button" class="green" onclick="exportQuiz()"><i class="fa fa-save"></i> {{save}}</button>
            <button type="button" class="red" onclick="resetNewQuizForm()"><i class="fa fa-ban"></i> {{cancel}}</button>
        </div>
    </form>
</div>