PLEASE HELP ME OUT DOMPractice.css body { margin: 1em; background-color: burlywo
ID: 3743961 • 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: "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:
Explanation / Answer
As you query. I have changed only in DOMPractice.js
There are two changes
I - In initButtons() method write code for hiding by default.
document.getElementById('QCreator').style.display = 'none';// hide Question Creator
2- On Show Question Creator button click show Question Creator section .
document.getElementById("BShowQC").onclick = function() {addQuestion()}; // internaly call addQuestion for show Add Question Section
function addQuestion() {
document.getElementById("QCreator").style.display = "block"; //Show section For adding question.
}
I am sharing the whole code of DOMPractice.js.You paste all the code in DomPratice.js.The functionality as you said worked properly.
////////////////////////////////////////////////////////////////// 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() {
document.getElementById('QCreator').style.display = 'none';// 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 */
document.getElementById("BShowQC").onclick = function() {addQuestion()};
function addQuestion() {
document.getElementById("QCreator").style.display = "block";
}
//if (document.getElementById("BShowQC").style.display === "none") {
// document.getElementById("BShowQC").style.display = "block";
// }
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.