PLEASE HELP ME OUT DOMPractice.css body { margin: 1em; background-color: burlywo
ID: 3743974 • Letter: P
Question
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM Practice</title>
<link href="DOMPractice.css" rel="stylesheet">
</head>
<body>
<main>
<section id="Tester">
<section id="Controls">
<button type="button" id="BForward">Forward</button>
<button type="button" id="BBack">Back</button>
<button type="button" id="BShow">Show Answer</button>
<button type="button" id="BShowQC">Show Question Creator</button>
<button type="button" id="BRemove">Remove Question</button>
<p id="Info">Question <span id="qIndex"></span> of
<span id="qCount"></span></p>
</section>
<h2>Test Yourself</h2>
<section id="currentQ">
<h3>Question</h3>
<div id="contentQ"></div>
</section>
<section id="currentA">
<h3>Answer</h3>
<div id="contentA"></div>
<button type="button" id="BHideA">Hide Answer</button>
</section>
</section>
<section id="QCreator">
<h2>Create Q&A</h2>
<button type="button" id="BAddQ">Add Q & A</button>
<button type="button" id="BHideQC">Hide Question Creator</button>
<section id="Inputs">
<textarea id="Question"></textarea>
<textarea id="Answer"></textarea>
</section>
</section>
</main>
<script src="DOMPractice.js"></script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
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: "The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. If the content of this block can not be divided into several parts, then the article should not be used."
}
];
// 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:
It should look like the following picture:
1. (10pts) 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 contento 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 information. 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 from the DOM look at its value property. Make sure you update all relevant display fields (10 pts) Write a function to remove the current question. Make sure you update all relevant display fields. Hint look for appropriate array methods 3.Explanation / Answer
As mentioned , we need to only modify DOMPractice.js and DOMPractice.css to fullfill the
said requirements.
Answer 1. Display questions and answers from the questions array given in the Javasript file
For creating paragraph <p> elements and add then to corresponding div tags, inlcude the
following piece of code to DOMPractice.js file as a function
function displayQA(){
var qcount = questions.length;
//qIndex would give the current index of question to be dispalyed from array
var paraQ = document.createElement("p"); // This will create a <p> elemement for question
var nodeQ = document.createTextNode(questions[qIndex][question]);
paraQ.appendChild(nodeQ);
var elementQ = document.getElementById("contentQ");
elementQ.appendChild(paraQ);
var paraA = document.createElement("p"); // This will create a <p> elemement for answer
var nodeA = document.createTextNode(questions[qIndex][answer]);
paraA.appendChild(nodeA);
var elementA = document.getElementById("contentA");
elementA.appendChild(paraA);
elementA.classList.add("currentA"); // This will add css style to <p> elemement for answer
}
Answer 2 : Function to add question/answer pair
For adding question/answer pair and from corresponding text area, inlcude the
following piece of code to DOMPractice.js file as a function
function addQuestion(){
//get the length of the questions array to add a next element
var qcount = questions.length;
//Get the question text using the value property of the text area
var q = document.getElementById("Question").value;
//assign the question input text to Question array
questions[qcount][question] =q;
//Get the answer text using the value property of the text area
var elementQ = document.getElementById("Question");
//assign the answer input text to Question array
elementQ.classList.add("textarea");
//css style property to the text area
var a = document.getElementById("Answer").value;
questions[qcount][answer] = a;
var elementA = document.getElementById("Answer");
elementA.classList.add("textarea");
}
Answer 3 : Function to remove the current question
function removeQuestion(){
//qIndex variable will give us the current question index which needs to be removed
if(qIndex < questions.length)
{
questions.splice(qIndex, 1); //splice method will delete the said element from array
}
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.