Hey there! Let's get this sorted for you—since you're not super familiar with JavaScript, I'll break this down into simple, easy-to-implement steps that don't require deep coding knowledge.

Step 1: Hide the Button by Default #

First, we'll use basic CSS to make sure the "chapter two" button stays hidden until the quiz is submitted. Add this code to your site's custom CSS section (usually found in your theme's customizer under "Additional CSS"):

/* Hide the button initially */
.quiz_button {
  display: none;
}

/* Show the button once the quiz results class is added */
.qmn_results_page .quiz_button {
  display: block; /* Use inline-block instead if your button was originally inline */
}

This works perfectly if the page refreshes after quiz submission (which adds the qmn_results_page class to the page body). But if your quiz submits without reloading the page (using AJAX), we'll need a tiny bit of JavaScript to watch for the class change.

Step 2: Add JavaScript for No-Refresh Submissions (If Needed) #

If the quiz submits without reloading the page, add this JavaScript snippet to your site (you can use a custom JS plugin or your theme's custom JavaScript section):

// Wait for the page to fully load before running code
document.addEventListener('DOMContentLoaded', function() {
  // Check if the results class exists right away
  toggleButtonVisibility();

  // Set up a listener to watch for changes to the body's class
  const classObserver = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.attributeName === 'class') {
        toggleButtonVisibility();
      }
    });
  });

  // Start observing changes to the body's class attribute
  classObserver.observe(document.body, { attributes: true });

  // Function to show/hide the button based on the results class
  function toggleButtonVisibility() {
    const chapterButton = document.querySelector('.quiz_button');
    if (document.body.classList.contains('qmn_results_page')) {
      chapterButton.style.display = 'block'; // Match your button's original display style
    } else {
      chapterButton.style.display = 'none';
    }
  }
});

Quick Notes #

• If your "chapter two" button uses a different class name than quiz_button, just replace that in the code with the actual class (you can find it by right-clicking the button on your page and selecting "Inspect").
• The CSS alone will work for most cases where the page refreshes after submission—only use the JavaScript if your quiz submits without reloading.

内容的提问来源于stack exchange，提问作者Meghan Logue