Currently I have a "quiz section" for my webpage. At the bottom of the information on the lesson there is a quiz.
Currently I have been able to show/hide standard text. But I want to know show a code block when I click "Show solution". I have tried changing class names, but I can't seem to get it right.
function show_hide(element)
{
var myAnswer = element.nextElementSibling;
var displaySetting = myAnswer.style.display;
var quizButton = element;
if(displaySetting=="inline-block"){
myAnswer.style.display = 'none';
quizButton.innerHTML = 'Show Solution';
}
else
{
myAnswer.style.display = 'inline-block';
quizButton.innerHTML = 'Hide Solution';
}
}.quiz-question{
margin-bottom: 10px;
text-align: left;
font-size: 15px;
color: #f44336;
font-weight: 400;
}
.quiz-button{
display: inline-block;
text-decoration: none;
color: #111;
border: 1px solid #f44336;
padding: 5px 5px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.quiz-button:hover{
color: #fff;
background: #f44336;
transition: 0.5s;
}
#answer{
display: none;
}<head>
<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS@latest/prism.min.js"></script>
</head>
<body>
<!-- Working Code -->
<h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p id="answer">
<b>Statements</b> are used when we want the program to perform an action. Expressions are used when
we want the program to calculate a value.
</p>
<br><br><hr>
<!-- Not Working Code -->
<h4>C - Question</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p id="answer">
<pre>
<code class="language-cpp line-numbers">
2 //2 is a literal that evaluates to value 2
"Hello World!" //"Hello World!" is a literal that evaluates to text "Hello"
</code>
</pre>
</p>
</body>You have multiple error in this code:
id must be unique use class instead.<div> for contain <pre> instead of <p>function show_hide(element) {
const myAnswer = element.nextElementSibling;
const displaySetting = myAnswer.style.display;
if (displaySetting === "inline-block") {
myAnswer.style.display = 'none';
element.innerHTML = 'Show Solution';
} else {
myAnswer.style.display = 'inline-block';
element.innerHTML = 'Hide Solution';
}
}.quiz-question {
margin-bottom: 10px;
text-align: left;
font-size: 15px;
color: #f44336;
font-weight: 400;
}
.quiz-button {
display: inline-block;
text-decoration: none;
color: #111;
border: 1px solid #f44336;
padding: 5px 5px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.quiz-button:hover {
color: #fff;
background: #f44336;
transition: 0.5s;
}
.answer {
display: none;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS@latest/prism.min.js"></script>
<!-- Working Code -->
<h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p class="answer">
<b>Statements</b> are used when we want the program to perform an action. Expressions are used when we want the program to calculate a value.
</p>
<br><br>
<hr>
<h4>C - Question</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<div class='answer'>
<pre>
<code class="language-cpp line-numbers">
2 //2 is a literal that evaluates to value 2
"Hello World!" //"Hello World!" is a literal that evaluates to text "Hello"
</code>
</pre>
</div>You can use prettify library
function show_hide(element)
{
var myAnswer = element.nextElementSibling
var displaySetting = myAnswer.style.display;
var quizButton = element;
if(displaySetting=="inline-block"){
myAnswer.style.display = 'none';
quizButton.innerHTML = 'Show Solution';
}
else
{
myAnswer.style.display = 'inline-block';
quizButton.innerHTML = 'Hide Solution';
}
}.quiz-question{
margin-bottom: 10px;
text-align: left;
font-size: 15px;
color: #f44336;
font-weight: 400;
}
.quiz-button{
display: inline-block;
text-decoration: none;
color: #111;
border: 1px solid #f44336;
padding: 5px 5px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.quiz-button:hover{
color: #fff;
background: #f44336;
transition: 0.5s;
}
#answer{
display: none;
}
code
{
padding: 2px 4px;
color: #000000;
background-color: #eeeeee;
border-radius: 3px;
}<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" integrity="sha512-PW9BfYtoXV6XYb/4FTkBoJEBM92TrGk7N324cCmF5i2dY02YvBg6ZPEAnSOZ5i2/nGPbsYFQwVzDxVVoWEKWww==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js" integrity="sha512-/9uQgrROuVyGVQMh4f61rF2MTLjDVN+tFGn20kq66J+kTZu/q83X8oJ6i4I9MCl3psbB5ByQfIwtZcHDHc2ngQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></head>
<body onload="prettyPrint()">
<!-- Working Code -->
<h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p id="answer">
<b>Statements</b> are used when we want the program to perform an action. Expressions are used when
we want the program to calculate a value.
</p>
<br><br><hr>
<!-- Not Working Code -->
<h4>C - Question</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p id="answer">
<code class="language-cpp prettyprint line-numbers">
2 //2 is a literal that evaluates to value 2
"Hello World!" //"Hello World!" is a literal that evaluates to text "Hello"
</code>
</p>
</body>