alert("--Google Form--\n\n➕ Click on add button to start\n\n◻️ Tried to do like Them 🙂."); const scrolling = () => { const btnScrollToTop = document.getElementById("btnScrollToTop"); btnScrollToTop.addEventListener("click", function() { //window.scrollTo(0, 0); window.scrollTo( { top:0, left: 0, behavior: "smooth" } ); // $("html", "body").animate({scrollTop: 0}, "slow"); }); } // ---------------------------abhinav---------------------------------------------- var questionBox, qContainer, qNumID=1, ddlist, ddlistID=0; var optCont_multi = {}; var optCont_check = {}; var sep_ques = []; var question = []; var queType = []; var optionNumber = 1; var qType = 'multi'; const newQuestion = () => { if(qNumID>1 && qNumID!=delId){ question.push(document.getElementById(`q${qNumID-1}`).value); queType.push(qType); document.getElementById(`optionsForSelectChoice${qNumID-1}`).remove(); document.getElementById(`questionEditableLastButtons${qNumID-1}`).remove(); document.getElementById(`optionsContainer${qNumID-1}`).style.paddingBottom = "20px"; document.getElementById(`q${qNumID-1}`).style.border = "none"; document.getElementById(`q${qNumID-1}`).style.paddingLeft = "0px"; document.getElementById(`q${qNumID-1}`).style.background = "white"; document.getElementById(`q${qNumID-1}`).disabled = true; sep_ques = []; if(qType == 'multi' || qType == 'check'){ for(let i=1 ; i { selected = document.querySelector(".selected"); optionsContainer = document.querySelector(".options-container"); optionsList = document.querySelectorAll(".option"); optionsContainer.classList.toggle("active"); optionsList.forEach(o => { o.addEventListener("click", () => { selected.innerHTML = o.querySelector("label").innerHTML; optionsContainer.classList.remove("active"); }); }); } const answerType = (type, id) => { qType = type; if(type == 'short'){ document.getElementById(`optionsContainer${id}`).innerHTML = ``; } else if (type == 'para') { document.getElementById(`optionsContainer${id}`).innerHTML = ``; } else if (type == 'multi') { optionNumber = 1; document.getElementById(`optionsContainer${id}`).innerHTML = `

`; } else if (type == 'check'){ optionNumber = 1; document.getElementById(`optionsContainer${id}`).innerHTML = `

`; } } const newOption = (id, type) => { document.getElementById(`opt${id}${optionNumber}`).value = `Option ${optionNumber}`; document.getElementById(`opt${id}${optionNumber}`).style.borderBottom = "2px solid rgb(87, 5, 194)"; document.getElementById(`opt${id}${optionNumber}`).setAttribute("onclick", `selectThis(${id}, ${optionNumber+1})`); for(let i=optionNumber-1 ; i>=1 ; i--) document.getElementById(`opt${id}${i}`).style.borderBottom = "none"; document.getElementById(`optionsContainer${id}`).appendChild(document.createElement("br")); newRIcon = document.createElement("div"); if(type == 'multi') newRIcon.setAttribute("class", "radioButtonsIcon"); else newRIcon.setAttribute("class", "boxButtonsIcon"); document.getElementById(`optionsContainer${id}`).appendChild(newRIcon); newInput = document.createElement("input"); newInput.setAttribute("type", "text"); newInput.setAttribute("class", "optionFillerInput"); newInput.setAttribute("id", `opt${id}${++optionNumber}`); newInput.setAttribute("placeholder", `Add option`); newInput.setAttribute("onclick", `newOption(${id}, 'multi')`); document.getElementById(`optionsContainer${id}`).appendChild(newInput); } var delId = 0; const delQue = (id) => { document.getElementById(`qNum${id}`).remove(); delId = id; qNumID--; } const replica = (id) => { if(qNumID>1 && qNumID!=delId){ question.push(document.getElementById(`q${qNumID-1}`).value); queType.push(qType); document.getElementById(`optionsForSelectChoice${qNumID-1}`).remove(); document.getElementById(`questionEditableLastButtons${qNumID-1}`).remove(); document.getElementById(`optionsContainer${qNumID-1}`).style.paddingBottom = "20px"; document.getElementById(`q${qNumID-1}`).style.border = "none"; document.getElementById(`q${qNumID-1}`).style.paddingLeft = "0px"; document.getElementById(`q${qNumID-1}`).style.background = "white"; document.getElementById(`q${qNumID-1}`).disabled = true; sep_ques = []; if(qType == 'multi' || qType == 'check'){ for(let i=1 ; i { for(let i=1 ; i { if(isPreview == false){ isQuestioned = false; isResponsed = true; document.getElementById("buttonsContainer").style.display = "none"; heading_of_form = document.getElementById("headerInput").value; document.getElementById("headerInput").style.border = "none"; document.getElementById("headerInput").style.backgroundColor = "#1abc9c"; document.getElementById("headerInput").style.color = "white"; document.getElementById("headerInput").style.marginTop = "0.2em"; document.getElementById("headerInput").disabled = true; HTML_questions = document.getElementById("main_div").innerHTML; if(qNumID > 1){ for(let i=1 ; i { document.getElementById("buttonsContainer").style.display = "inline-block"; if(isResponsed == true || isPreview == true){ (isResponsed == true) ? isResponsed = false : isPreview = false; isQuestioned = true; document.getElementById("main_div").innerHTML = HTML_questions; document.getElementById("headerInput").disabled = false; document.getElementById("headerInput").value = heading_of_form; document.getElementById("headerInput").style.borderBottom = "0.2em solid rgb(187, 187, 187)"; document.getElementById("headerInput").style.backgroundColor = "white"; document.getElementById("headerInput").style.color = "black"; document.getElementById("headerInput").style.marginTop = "0em"; document.getElementById("testSectionButton").style.border = "none"; document.getElementById("testSectionButton").style.backgroundColor = "white"; document.getElementById("testSectionButton").disabled = false; document.getElementById("responsesSectionButton").style.border = "none"; document.getElementById("responsesSectionButton").style.backgroundColor = "white"; document.getElementById("responsesSectionButton").disabled = false; document.getElementById("questionSectionButton").style.borderBottom = "3px solid rgb(87, 5, 194)"; document.getElementById("questionSectionButton").style.backgroundColor = "rgb(209, 230, 255)"; document.getElementById("questionSectionButton").disabled = true; document.getElementById("titleContainerOfDescription").value = form_lower_title; document.getElementById("descriptionContainerOfDescription").value = form_lower_descrip; } } var isPreview = false, titleCntr; const preview = () => { document.getElementById("buttonsContainer").style.display = "none"; if(isResponsed == false){ HTML_questions = document.getElementById("main_div").innerHTML; form_lower_descrip = document.getElementById("descriptionContainerOfDescription").value; form_lower_title = document.getElementById("titleContainerOfDescription").value; } if(isResponsed == true){ document.getElementById("que-response").remove(); } heading_of_form = document.getElementById("headerInput").value; document.getElementById("headerInput").style.border = "none"; document.getElementById("headerInput").style.backgroundColor = "#1abc9c"; document.getElementById("headerInput").style.color = "white"; document.getElementById("headerInput").style.marginTop = "0.2em"; document.getElementById("headerInput").disabled = true; document.getElementById("questionSectionButton").style.border = "none"; document.getElementById("questionSectionButton").style.backgroundColor = "white"; document.getElementById("questionSectionButton").disabled = false; document.getElementById("responsesSectionButton").style.border = "none"; document.getElementById("responsesSectionButton").style.backgroundColor = "white"; document.getElementById("responsesSectionButton").disabled = false; document.getElementById("testSectionButton").style.borderBottom = "3px solid rgb(87, 5, 194)"; document.getElementById("testSectionButton").style.backgroundColor = "rgb(209, 230, 255)"; document.getElementById("testSectionButton").disabled = true; document.getElementById("titleContainerOfDescription").value = "0 responses"; document.getElementById("titleContainerOfDescription").disabled = true; document.getElementById("titleContainerOfDescription").style.border = "none"; document.getElementById("titleContainerOfDescription").style.backgroundColor = 'white'; titleCntr = document.getElementById("titleDescrioptionConatiner"); document.getElementById("titleDescrioptionConatiner").remove(); //removing all the question conatiner box if(isResponsed == false) { for(let i=1 ; i { alert("wait for v1.1 😊 "); } const newImage = () => { alert("wait for v1.1 😊 "); } const newVideo = () => { alert("wait for v1.1 😊 "); }

Google Form UI 📑