Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Start the quiz on button click #37

Open
VrbovskyM opened this issue Feb 16, 2023 · 2 comments
Open

Start the quiz on button click #37

VrbovskyM opened this issue Feb 16, 2023 · 2 comments

Comments

@VrbovskyM
Copy link

VrbovskyM commented Feb 16, 2023

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
Copy link
Owner

bonartm commented Mar 5, 2023

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
Copy link
Author

VrbovskyM commented Mar 5, 2023

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)
image
and this is after miliseconds:
image
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants