Spaces:
Runtime error
Runtime error
| <!--<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href='index_style.css' rel='stylesheet' type='text/css'> | |
| <script type="text/javascript" src="index.js"></script> | |
| <title>Title</title> | |
| </head> | |
| <body>--> | |
| {% extends 'layout.html' %} | |
| {% block title %} Custom Form {% endblock %} | |
| {% block content %} | |
| <h1>{{data}} {{comp}} {{len}}{{types}}</h1> | |
| <form id="myForm" method="POST" class="form"> | |
| <div class="container"> | |
| <div class="forminfo"> | |
| <h2 style="padding:20px; text-align:center;">Create New Assessment</h2> | |
| <hr style="height:2px;border-width:0;color:gray;background-color:grey;width:85%;margin:0 auto;padding:1px;"> | |
| <div class="namearea"> | |
| <label for="name" style="font-size:16px; font-weight:bold;">Name of form :</label> | |
| <input name="name" id="name" type="text" required style="margin:20px auto; background-color:white !important;"><br> | |
| </div> | |
| <div class="labelarea"> | |
| <label for="describ" style="font-size:16px; font-weight:bold;">Description of form :</label><br> | |
| <textarea name="describ" id="describ" type="text" required style="height:200px; width:400px; border-radius:10px;"></textarea><br> | |
| </div> | |
| </div> | |
| <div class="form-ques"> | |
| <div class="form-group"> | |
| <div id="inputContainer"></div> | |
| </div> | |
| <hr style="height:2px;border-width:0;color:gray;background-color:grey;width:50%;margin:0 auto;padding:1px;"> | |
| <div id="add" style="display:block; text-align: center; margin:20px auto;"> | |
| <button type="button" onclick="addInputs();" class="add-btn"> + </button> | |
| </div> | |
| <div id="error" style="text-align:center; font-weight:bold; color:red;"></div> | |
| <div id="action" style="display:block; text-align: center; margin:20px auto;"> | |
| <button type="submit" name="submit" id="btn" class="sub-btn">Create <span class="arrow"><i class="uil uil-arrow-right"></i></span></button> | |
| <button type="reset" class="rst-btn">Reset <span class="arrow"><i class="uil uil-redo"></i></span></button> | |
| <button type="reset" onclick="window.location.reload();" class="rel-btn">Start New <span class="arrow"><i class="uil uil-refresh"></i></span></button> | |
| </div> | |
| <hr style="height:2px;border-width:0;color:gray;background-color:grey;width:90%;margin:0 auto;padding:1px;"> | |
| </div> | |
| </div> | |
| </form> | |
| <script> | |
| window.onload = addInputs; | |
| var count = 0; | |
| function addInputs() { | |
| document.getElementById("error").textContent = ''; | |
| var container = document.getElementById("inputContainer"); | |
| const dragElement = document.createElement('div'); | |
| dragElement.classList.add('drag'); | |
| dragElement.setAttribute('draggable', true); | |
| const label = document.createElement('label'); | |
| label.setAttribute('for', `inpt${count+1}`); | |
| label.setAttribute('id', `label${count+1}`); | |
| label.innerHTML = "<b>"+`Question ${count+1} : `+"</b>"; | |
| dragElement.appendChild(label); | |
| const select = document.createElement('select'); | |
| select.setAttribute('name', `select${count+1}`); | |
| select.setAttribute('id', `select${count+1}`); | |
| const option1 = document.createElement('option'); | |
| option1.setAttribute('value', '1101'); | |
| option1.innerText = 'Psychological well-being'; | |
| select.appendChild(option1); | |
| const option2 = document.createElement('option'); | |
| option2.setAttribute('value', '1102'); | |
| option2.innerText = 'Health aspects'; | |
| select.appendChild(option2); | |
| const option3 = document.createElement('option'); | |
| option3.setAttribute('value', '1103'); | |
| option3.innerText = 'Time management'; | |
| select.appendChild(option3); | |
| const option4 = document.createElement('option'); | |
| option4.setAttribute('value', '1104'); | |
| option4.innerText = 'Educational standards'; | |
| select.appendChild(option4); | |
| const option5 = document.createElement('option'); | |
| option5.setAttribute('value', '1105'); | |
| option5.innerText = 'Cultural diversity'; | |
| select.appendChild(option5); | |
| const option6 = document.createElement('option'); | |
| option6.setAttribute('value', '1106'); | |
| option6.innerText = 'Social well-being'; | |
| select.appendChild(option6); | |
| const option7 = document.createElement('option'); | |
| option7.setAttribute('value', '1107'); | |
| option7.innerText = 'Good governance'; | |
| select.appendChild(option7); | |
| const option8 = document.createElement('option'); | |
| option8.setAttribute('value', '1108'); | |
| option8.innerText = 'Community vitality'; | |
| select.appendChild(option8); | |
| dragElement.appendChild(select); | |
| const textarea = document.createElement('textarea'); | |
| textarea.setAttribute('id', `inpt${count+1}`); | |
| textarea.setAttribute('name', `inpt${count+1}`); | |
| textarea.setAttribute('rows', '4');// Set the initial number of rows to 4 | |
| textarea.setAttribute('placeholder', 'Enter question'); | |
| textarea.setAttribute('required', ''); | |
| dragElement.appendChild(textarea); | |
| <!-- const input = document.createElement('input');--> | |
| <!-- input.setAttribute('id', `inpt${count+1}`);--> | |
| <!-- input.setAttribute('name', `inpt${count+1}`);--> | |
| <!-- input.setAttribute('type', 'text');--> | |
| <!-- input.setAttribute('placeholder', 'Enter Question');--> | |
| <!-- input. setAttribute('required', '');--> | |
| <!-- dragElement.appendChild(input);--> | |
| const removeButton = document.createElement('button'); | |
| removeButton.setAttribute('class', 'remove-button'); | |
| removeButton.innerText = 'Remove'; | |
| dragElement.appendChild(removeButton); | |
| dragElement.classList.add('drag-enter'); | |
| container.appendChild(dragElement); | |
| void dragElement.offsetWidth; | |
| dragElement.classList.remove('drag-enter'); | |
| removeButton.addEventListener('click', () => { | |
| if (count == 1) { | |
| document.getElementById("error").textContent = '! Atleast 1 Question is needed.'; | |
| } | |
| else { | |
| dragElement.classList.add('drag-leave'); | |
| // Wait for the animation to finish before removing the item from the DOM | |
| setTimeout(() => { | |
| dragElement.classList.add('zoom-out'); | |
| }, 50); | |
| setTimeout(() => { | |
| container.removeChild(dragElement); | |
| updateIdsAndNames() | |
| }, 300); | |
| count--; | |
| if (count < 20) { | |
| document.getElementById("add").style.display = "block"; | |
| } | |
| } | |
| }); | |
| count++; | |
| if (count >= 20) { | |
| document.getElementById("add").style.display = "none"; | |
| } | |
| } | |
| const container = document.getElementById('inputContainer'); | |
| let draggingElement; | |
| container.addEventListener('dragstart', (event) => { | |
| draggingElement = event.target; | |
| draggingElement.classList.add('dragging'); | |
| }); | |
| container.addEventListener('dragend', (event) => { | |
| draggingElement.classList.remove('dragging'); | |
| }); | |
| container.addEventListener('dragover', (event) => { | |
| event.preventDefault(); | |
| const targetElement = event.target.closest('.drag'); | |
| if (targetElement && targetElement !== draggingElement) { | |
| const containerRect = container.getBoundingClientRect(); | |
| const targetRect = targetElement.getBoundingClientRect(); | |
| if (event.clientY > (targetRect.top + targetRect.height / 2)) { | |
| container.insertBefore(draggingElement, targetElement.nextElementSibling); | |
| } else { | |
| container.insertBefore(draggingElement, targetElement); | |
| } | |
| updateIdsAndNames(); | |
| } | |
| }); | |
| function updateIdsAndNames() { | |
| const dragElements = container.querySelectorAll('.drag'); | |
| dragElements.forEach((element, index) => { | |
| const label = element.querySelector('label'); | |
| const input = element.querySelector('textarea'); | |
| label.setAttribute('for', `inpt${index + 1}`); | |
| label.setAttribute('id', `label${index + 1}`); | |
| label.innerHTML= "<b>"+`Question ${index + 1}`+" :</b>"; | |
| input.setAttribute('id', `inpt${index + 1}`); | |
| input.setAttribute('name', `inpt${index + 1}`); | |
| }); | |
| } | |
| </script> | |
| {% endblock %} | |
| <!-- <div id="add" style="display:block">--> | |
| <!-- <button type="button" onclick="addInputs();">+</button>--> | |
| <!-- </div>--> | |
| <!-- <div id="remove" style="display:none">--> | |
| <!-- <button type="button" onclick="removeInputs();">-</button>--> | |
| <!-- </div>--> | |
| <!-- <script>--> | |
| <!-- window.onload = addInputs;--> | |
| <!-- var ques = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];--> | |
| <!-- var count = 0;--> | |
| <!-- function addInputs() {--> | |
| <!-- var label = "label" + ques[count] + "";--> | |
| <!-- var input = "inpt" + ques[count] + "";--> | |
| <!-- var labelElement = document.createElement("label");--> | |
| <!-- labelElement.innerHTML = label + ": ";--> | |
| <!-- labelElement.setAttribute("for", input);--> | |
| <!-- labelElement.setAttribute("id", label);--> | |
| <!-- var inputElement = document.createElement("input");--> | |
| <!-- inputElement.setAttribute("type", 'text');--> | |
| <!-- inputElement.setAttribute("name", input);--> | |
| <!-- inputElement.setAttribute("id", input);--> | |
| <!-- inputElement.setAttribute("placeholder", input);--> | |
| <!-- var container = document.getElementById("inputContainer");--> | |
| <!-- container.appendChild(labelElement);--> | |
| <!-- container.appendChild(inputElement);--> | |
| <!-- count++;--> | |
| <!-- if (count > 1) {--> | |
| <!-- document.getElementById("remove").style.display = "block";--> | |
| <!-- }--> | |
| <!-- if (count >= 20) {--> | |
| <!-- document.getElementById("add").style.display = "none";--> | |
| <!-- }--> | |
| <!-- }--> | |
| <!-- function removeInputs() {--> | |
| <!-- count--;--> | |
| <!-- if (count < 20) {--> | |
| <!-- document.getElementById("add").style.display = "block";--> | |
| <!-- }--> | |
| <!-- if (count <= 1) {--> | |
| <!-- document.getElementById("remove").style.display = "none";--> | |
| <!-- }--> | |
| <!-- const removeLabel = document.getElementById("label" + ques[count] + "");--> | |
| <!-- const removeInput = document.getElementById("inpt" + ques[count] + "");--> | |
| <!-- document.getElementById("inputContainer").removeChild(removeLabel);--> | |
| <!-- document.getElementById("inputContainer").removeChild(removeInput);--> | |
| <!-- }--> | |
| <!-- </script>--> |