Black screen and loading issue with lightbox and question banks

Hello everyone,

I’m currently working on an e-learning module where learners progress through different levels. Each level corresponds to a question bank containing around ten questions, from which one is randomly drawn. The learner must answer it correctly to validate the level, and then they are redirected to a results slide.

To create a more immersive experience (since the module follows a narrative progression), I decided to use lightboxes: both the random question selection and the redirection to the results slide are handled via lightboxes.

However, I’m facing an issue that I can’t quite explain, and I haven’t found any similar cases in the forum (though I might have missed something). Sometimes, instead of displaying the question bank or the results slide, I get a black screen with only the name of the slide elements that were supposed to appear. It looks like the lightbox is opening before all elements of the called slide have fully loaded. I’ve attached some screenshots to illustrate the issue.

I’ve tried different ways of calling the question bank (drawing one question at a time or drawing all questions at once), but the issue occurs in both cases, so I don’t think that’s the root cause.

Some JavaScript modifications were applied to customize the lightbox appearance and the results slides. I don’t think the problem comes from that, but I’m sharing the scripts just in case.

function addCssToHead(cssRules) {
    var styleElement = document.createElement('style');
    styleElement.textContent = cssRules;
    document.head.appendChild(styleElement);
}
var css = `#light-box-close { display: none !important;} `;
addCssToHead(css);
//faire disparaître croix de fermeture des lightbox

document.getElementsByClassName('lightBoxSlide')[0].style.backgroundColor = "transparent";
//garder transparence du fond
document.getElementById('light-box-wrapper').style.background="none";
//pas de contour
document.getElementsByClassName('visible-overlay')[0].style.backgroundColor = "rgba(61,32,25,0.5)";
//overlay sepia semi transparent 0.5 alpha

const Correct = document.querySelector('[Data-acc-text="Correct"]');
const Incorrect = document.querySelector('[Data-acc-text="Incorrect"]');
if(Correct || Incorrect) {
    Correct.classList.add('hidden');
    Incorrect.classList.add('hidden');
}

In short, I’m running out of solutions, and I discovered this issue at the very end of development, which puts the entire project at risk... Has anyone here encountered a similar problem before?

Any ideas would be greatly appreciated—I feel a bit lost (and desperate)!