issue with hiding a Code block for a quiz

Question

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>

No @phuzi his code doesn't work, try the "hide" second button :) — Simone Rossaini, Feb 04 '22 at 12:35
the pre tag cannot be inside a p tag, you should close the p tag before opening a pre tag, there's is a similar question that has been asked and [here](https://stackoverflow.com/a/44542148/17570866)'s the accepted answer. — Ghaith Troudi, Feb 04 '22 at 12:36

Simone Rossaini · Accepted Answer · 2022-02-04T12:40:12.603

You have multiple error in this code:

id must be unique use class instead.
use <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>

as side-note while we talk about semantics: `

` is a terrible use. Thats what you have `margin-top/bottom` for. `
` should only be used for line-breaks not for aligning different elements apart. — tacoshy, Feb 04 '22 at 12:30
@CrystalBall12344 the `
` tag contain code block, i mean don't use `
` for contain `
` tag. — Simone Rossaini, Feb 04 '22 at 12:32
@tacoshy i just fixed js and some html stuff, i'm not here to fix all the code :) But I totally agree with you, if we wanted to look at using an inline js it is not "clean" and performing as using `addEventListener` — Simone Rossaini, Feb 04 '22 at 12:34

score -1 · Answer 2 · answered Feb 04 '22 at 12:46

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>

An answer should not just recommend an external library withotu explaination. Despite that, it does not fix the fundemental issue of an ID that is used multiple times. — tacoshy, Feb 04 '22 at 12:55

issue with hiding a Code block for a quiz

2 Answers2