'issue with hiding a Code block for a quiz [duplicate]

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>
javascripthtmlcss


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ghaith Troudi

Related Questions