PLEASE HELP ME OUT

DOMPractice.css

body { margin: 1em; background-color: burlywood; }

main { background-color: white; padding: 1em; }

#currentA { border: dashed; padding: 0.5em; padding-left: 1em; padding-bottom: 1em; background-color: #accfe7; }

textarea { display: block; width: 23em; height: 5em; margin-bottom: 2em; }

#QCreator, #Tester { border: solid; min-height: 100px; padding: 0.5em; }

#QCreator { margin-top: 1em; }

/* You may want to define a couple classes here to move the answer on and off the screen. */

/* Using these classes to hide and show the question creator */

.hideStuff { display: none; }

.showStuff { display: block; }

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

DOMPractice.html

Question of

Test Yourself

Question

Answer

Create Q&A

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

DOMPractice.js

/* 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

// 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 // Show and hide answer // Forward and back Questions // Remove question // Add question }

/* You may want to define functions like the following to attach to buttons */

/* Takes the content from the text areas and adds to the quesiton list */ function addQuestion() { // You provide the functionality. }

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Look up the structure and the various IDs that are put on the elements in DOMPractice.html (do NOT need to change the HTML file).

Revise DOMPractice.js and DOMPractice.css to fulfill the following question.

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 Creator button for adding questions to the question list as shown: