Link to the zip file(Homework #3, DOMPracticeStudent.zip)-- https://www.grotto-networking.com/WebSystems/WebSystemsMaterials.html#weekly-materials

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. You will need to look at it to see the structure and the various IDs that I put on the elements. Almost all your work will go into the JavaScript file with just a few additions to the stylesheet required. Note: the HTML file includes both the CSS and JavaScript files 1. (1Opts) Display questions and answers from the questions array given in the JavaScript file. In this assignment you have my permission to use global variables. In the JavaScript file you will see I've already defined a few for you: a "state" variable that gives the index of the current question, qIndex, DOM element reference variables qCountSpan and qIndexSpan. Using global variables makes them accessible from your browsers developers console so you can interactively work with them to debug and develop your code. a. b. Create paragraph

elements to hold question and answer. Hint: use document.createElement("p") c. Need to add those paragraph elements to the corresponding

s with IDs contentQ and contenta respectively. d. Create a function to display the question/answer from the questions array according to the value of qIndex variable. Make sure that this function updates all appropriate display informatiorn 2. (10 pts) To allow a user to add a question/answer pair write a function to get the content from the s that correspond to the new question and answer, pack it into a JavaScript object, and add it to the questions array. Note to get content of a <textarea> from the DOM look at its value property. Make sure you update all relevant isplay fields 3. (10 pts) Write a function to remove the current question. Make sure you update all relevant display fields. Hint look for appropriate array methods 4. (10 pts) Showing/Hiding Question Creator section. We are going to use CSS classes to show and hide this section. To understand how this works you can review the cascade part of CSS. We will use the CSS display property set to none to completely remove the Question Creator section from view. Will then show the section by changing the display property to block. In the external CSS file I've created two CSS classes: hidestuff and showstuff. To initially hide this section, use JavaScript to add the hideStuff class to this section. Then "toggle" the showstuff class on this element to show/hide it. Come up with a function to call to do this "toggling". Hint all DOM elements contain a classList object that has very powerful and convenient methods for manipulating the CSS classes applied to an element. 5. (10 pts) Showing/Hiding "Answer" section. We will use a different mechanism than the previous to show/hide the answer section. In this case we want to always leave space for the answer but not necessarily show it until the user wants to see it. You will come up with two CSS classes to do this by using a different position property than "normal", along with corresponding positioning attributes to move the answer off screen and on screen from the left. Come up with a function to toggle the answer section on and off the screen