You will start with the DOMPractice.zip file from the link: https://drive.google

Question

You will start with the DOMPractice.zip file from the link:  https://drive.google.com/file/d/1Dw3CZKzl-IbYf3MbNqFY0YE2tLavTeJT/view?usp=sharing

The end goal will be to have a functional program that looks like the following for practicing questions:

With an addition pane that is usually hidden that can be shown via clicking the Show Question Creatorbutton for adding questions to the question list as shown:

The zip file includes an HTML file, an external style sheet file, and an external JavaScript file. You will NOT change the HTML file in anyway. Almost all your work will go into the JavaScript file with just a few additions to the stylesheet required.

ForwardBack Show Answer Show Question Creator Remove Question Question 3 of 4 Test Yourself Question How are heading elements similar and different from the header element? Answer the header element is a container and can contain multiple elements. In addition it is good and 1 commont practice to include a heading element within a header element Hide Answer

Explanation / Answer

/* Global variables just for easy practice */ // An array of objects containing questions and answers questions = [ { question: "What does HTML stand for?", answer: "Hyper Text Markup Language." }, { question: "Give the selector and rule to color all paragraph text blue.", answer: "p {color: blue;}" }, { question: "How are heading elements similar and different from the header element?", answer: "the header element is a container and can contain multiple elements. In addition it is good and commont practice to include a heading element within a header element." }, { question: "When would you want to use an article element and when would this generally not be necessary?", answer: "To be written..." } ]; // Initial question to display qIndex = 0; // Set up variables to hold element references bForward=document.getElementById("BForward"); bBack=document.getElementById("BBack"); bShow=document.getElementById("BShow"); bShowQC=document.getElementById("BShowQC"); bRemove=document.getElementById("BRemove"); bHideA=document.getElementById("BHideA"); bAddQ=document.getElementById("BAddQ"); bHideQC=document.getElementById("BHideQC"); contentQ=document.getElementById("contentQ"); contentA=document.getElementById("contentA"); newQuestion=document.getElementById("Question"); newAnswer=document.getElementById("Answer"); qCreator=document.getElementById("QCreator"); currentA=document.getElementById("currentA"); // Example of variables and initialization qCountSpan = document.getElementById("qCount"); qIndexSpan = document.getElementById("qIndex"); // Initialize content qCountSpan.innerHTML = questions.length; qIndexSpan.innerHTML = qIndex + 1; // initialize buttons initButtons(); /* Functions defined below here */ /* Attach buttons to their handler functions here. Button id: BForward BBack BShow BShowQC BRemove BHideA BAddQ BHideQC */ function initButtons() { // Show and hide creator hideQuestionCreator(); // Show and hide answer displayQuestion(); displayAnswer(); hideAnswer(); // Forward and back Questions // Remove question // Add question } /* You may want to define functions like the following to attach to buttons */ //display Question function displayQuestion(){ questionP=document.createElement("p"); questionP.id="questionP"; questionP.innerHTML=questions[qIndexSpan.innerHTML-1]["question"]; contentQ.appendChild(questionP); } //dispaly answer function displayAnswer(){ answerP=document.createElement("p"); answerP.id="answerP"; answerP.innerHTML=questions[qIndexSpan.innerHTML-1]["answer"]; contentA.appendChild(answerP); } /* Takes the content from the text areas and adds to the quesiton list */ function addQuestion() { // You provide the functionality. if(newQuestion.value==""){ alert("please input new question"); } else if(newAnswer.value==""){ alert("please input new answer"); }else{ questions.push({question:newQuestion.value,answer:newAnswer.value}); qCountSpan.innerHTML = questions.length; alert("Create question successfully"); newQuestion.value=""; newAnswer.value=""; qCountSpan.innerHTML = questions.length; qIndex=questions.length-1; qIndexSpan.innerHTML = qIndex + 1; contentQ.removeChild(document.getElementById("questionP")); contentA.removeChild(document.getElementById("answerP")); displayQuestion(); displayAnswer(); } } //remove question function removeQuestion(){ if(qIndex>=0){ questions.splice(qIndex,1); qCountSpan.innerHTML = questions.length; if(questions.length==0){ qIndexSpan.innerHTML = 0; } if(qIndex==questions.length){ qIndex=qIndex-1; qIndexSpan.innerHTML = qIndex+1; } contentQ.removeChild(document.getElementById("questionP")); contentA.removeChild(document.getElementById("answerP")); displayQuestion(); displayAnswer(); }else{ alert("No question to remove"); } } //show Question Creator function showQuestionCreator(){ if(!qCreator.classList.contains("showStuff")){ qCreator.classList.toggle("showStuff"); } } //hide Question Creator function hideQuestionCreator(){ if(qCreator.classList.contains("hideStuff")){ qCreator.classList.toggle("showStuff"); } qCreator.classList.add("hideStuff"); } //show Answer function showAnswer(){ if(!currentA.classList.contains("showAnswer")){ currentA.classList.toggle("showAnswer"); } } //hide Answer function hideAnswer(){ if(currentA.classList.contains("hideAnswer")){ if(currentA.classList.contains("showAnswer")){ currentA.classList.toggle("showAnswer"); } } currentA.classList.add("hideAnswer"); } //foward function forwardQuestion(){ if(qIndex+20){ qIndex=qIndex-1; } else{ qIndex=questions.length-1; } qIndexSpan.innerHTML = qIndex+1; contentQ.removeChild(document.getElementById("questionP")); contentA.removeChild(document.getElementById("answerP")); displayQuestion(); displayAnswer(); } //event listener bForward.addEventListener("click",forwardQuestion); bBack.addEventListener("click",backwardQuestion); bShow.addEventListener("click",showAnswer); bShowQC.addEventListener("click",showQuestionCreator); bRemove.addEventListener("click",removeQuestion); bHideA.addEventListener("click",hideAnswer); bAddQ.addEventListener("click",addQuestion); bHideQC.addEventListener("click",hideQuestionCreator);

Related Questions

Navigate

• Browse (All)
• Browse Y
• Subjects

---

---

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.