Skip to main content

Question component methods

getQuestionMetrics​

Arguments​

ArgumentTypeDescription
componentIdstring - requiredComponent Id of the Question component

This method returns the metrics of the Question component. Metrics returned are all the questions in the component, and for each answer a count of how many times the specific answer has been selected. The answers for the current user are included in the metrics result that are returned by this method.

info

The Question Component loads the metrics into the experience as it needs them. For normal use when the getQuestionMetrics would get called the metrics are available, however sometimes this is not the case. In that case there is a Quiz Metrics Loaded event can be used to get the metrics as soon as they become available.

Example​

const metrics = window.wyng['_WYNG_ID_'].getQuestionMetrics('quiz_123456');

console.log(metrics);

Potential Output​

{
    question_123456: {
        answer_123456: 120,
        answer_234567: 240,
        answer_345678: 57,
        answer_456789: 97
    },
    question_234567: {
        answer_987654: 119,
        answer_876543: 372,
        answer_765432: 613
    }
}

setQuizNextStepHandler​

Arguments​

ArgumentTypeDescription
componentIdstring - requiredComponent Id of the Question component
nextStepHandlerfunction - requiredMiddleware function which is called after step completion with the completed step as argument

This method allows for the setup of a custom handler to override the default step flow. The handler will be called every time a step is completed, with the completed step passed as an argument. It should return either the next step's ID or its title to navigate to the subsequent step.

info

The keyword form and result IDs or titles could be used for navigating to form and results accordingly. The quiz will first navigate to the form step, but after the form is automatically or manually submitted, the user will be navigated to the specified result. If the handler returns a nullable value, the next phase will be automatically selected according to the order in the standard flow.

Example​

window.wyng['_WYNG_ID_'].setQuizNextStepHandler('quiz_123456', function(completedStep) {
    if (completedStep.name == 'Step 1' && completedStep.answers[0] == 'Go to step 2') {
        return 'question_12345';
    }
    if (completedStep.id == 'question_12345') {
        if (completedStep.answers[0] == 'Go to form') {
            return 'form';
        }
        if (completedStep.answers[0] == 'Go to first result') {
            return 'first Result';
        }
    }
});

Hiding steps​

These methods can be used to dynamically hide specific quiz steps based on your custom logic. For example, if you use Profiles and some user data is already known, you can hide the corresponding questions.

Notice

When steps are hidden using the SDK, they will be removed from the next step selection pool. Hidden steps will be skipped in the user flow. You can add the steps back to the selection pool via the revealStep or revealSteps methods. These methods do not move the user to a new step, but control visibility of future steps in the flow.

hideSteps​

Arguments:​

ArgumentTypeDescription
stepsarray of strings - requiredAll step ID's or names that need to get hidden.
componentIdstringThe componentId of the quiz that the steps are in

Hide multiple quiz steps at once. The argument componentId is optional. If it is not provided, all matching quiz steps in all quizzes in the experience will get hidden.

This example will hide all quiz steps named Question 1 as well as quiz steps with id question_12345.

window.wyng['_WYNG_ID_'].hideSteps(['Question 1', 'question_12345']);

hideStep​

Arguments:​

ArgumentTypeDescription
stepstring - requiredStep ID or name of the step that will get hidden.
componentIdstringThe componentId of the quiz that the steps are in

Hide a quiz step. The argument componentId is optional. If it is not provided, all steps that having a matching Step ID or name on all quizzes in the experience will get hidden.

This example will hide all quiz steps named Question 1. No componentId is specified, so matching steps in all quizzes in the experience will get hidden.

window.wyng['_WYNG_ID_'].hideStep('Question 1');

revealSteps​

Arguments:​

ArgumentTypeDescription
stepsarray of strings - requiredAll Step ID's or names to add back to the next step selection pool.
componentIdstringThe componentId of the quiz that the steps are in

Reveal multiple hidden quiz steps at once. The argument componentId is optional. If it is not provided, all matching quiz steps in all quizzes in the experience will get available for selection as next steps.

This example will reveal all quiz steps named Question 1 as well as quiz steps with ID question_12345.

window.wyng['_WYNG_ID_'].revealSteps([ 'Question 1', 'question_12345' ]);

revealStep​

Arguments:​

ArgumentTypeDescription
stepstring - requiredThe step ID or name that need to get back to the next step selection pool.
componentIdstringThe componentId of the quiz that the step is in

Reveal a quiz step. The argument componentId is optional. If it is not provided, all steps that having a matching Step ID or name on all quizzes in the experience will get available for selection as next steps.

This example will reveal all quiz steps named Question 1. 

window.wyng['_WYNG_ID_'].revealStep('Question 1');