Start the quiz on button click

[VrbovskyM]

Hi. Im wondering if it is possible to start/load/initialize the quiz with some event listener, for example, Start the quiz when I press a button. Currently I got it working just fine, when page loads. Then I tried to put all quizdown javascript into a function, which is called with button. So with a click of a button, I append

<div class="quizdown"> 
</div>

with a questions content, and call quizdown.init() But this way, it doesnt seem to be initialized. I can see the question content being appended to the div, but its just text, no quiz. Im not sure if im doing something wrong or this is intended behaviour. Thanks in advance for reply!

[bonartm]

init only created an app on page load by looking and converting all .quizdown elements. In your function you should use the createApp method. It needs the raw quizdown text, the node where the app should render and the default configuration. I've never tried it out, though.

let config = {
    startOnLoad: true,          // detect and convert all div html elements with class quizdown
    shuffleAnswers: true,       // shuffle answers for each question
    shuffleQuestions: false,    // shuffle questions for each quiz
    nQuestions: undefined,       // display n questions at random, if shuffleQuestions is true
    primaryColor: 'steelblue',  // primary CSS color
    secondaryColor: '#f2f2f2',  // secondary CSS color
    textColor: 'black',         // text color of some elements
    locale: null                // language of the user interface (auto-detect per default)
};
let node = document.querySelector('.quizdown');
createApp(node.innerHTML, node, config);

[VrbovskyM]

Thank you. I will definitely try that. Although, I kinda fixed the issue, by using iframe. When I click a button, I create an iframe that has quizdown in it and it works nicely. Another question tho. It takes some time, few milisecons to load the quizdown. And in that time, sometimes I can see the text of the quiz in pure html way see here I clicked the subpage with quiz: (I screnrecorded the process, slow downed video and managed to take screenshot) and this is after miliseconds: Do you have some kind of hack so that question text is not visible first ? I was thinking I could create a div on whole body with same color, that would dissappear after 0.2seconds. But slow internet it seems to load way slower.