<!--<!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>-->