Design Templates

Key Features of Design Templates

The quiz design templates provided by Judge are not merely different in appearance, but each has various functional differences. It is recommended that an appropriate design template be selected for the quiz's intended use.

Vertical Stepper

  • When a question is answered, the next question is added directly below the step. The history of questions and answer choices are stacked vertically on the screen.

    This is convenient because quiz users can answer questions one after the other while checking their own responses, and can easily modify their answers by scrolling up on the screen. This is a functional type that allows for fast-paced answers even when there are many questions.

    There are various types of vertical steppers, including those that close and pile up the choices of answered questions, and those that do not close and pile up the choices of answered questions.

    Design Templates - Vertical Stepper

1 Screen 1 Question Slider

  • This type displays only one question per screen. When a question is answered, the screen switches to the next question.

    This type is suitable for questions that can be answered casually and do not require modification of the answer, or when only the information for a single question is to be displayed on the screen.
    Design Templates - 1 Screen 1 Question Slider

Chatbot

  • This type of functionality allows the quiz to float in a small window on the site where it is embedded.

    By displaying quizzes in a resident chatbot format, visitors can quickly access the information they seek, which can be expected to increase site usage satisfaction.
    Design Templates - Chatbot

Sheet

  • This is a function type where all questions are displayed from the beginning.

    It works more nimbly than other templates, even when there is a large volume of questions.

    If a question split function is available, the display page can be divided by a certain number of questions.

    Design Templates - Sheet

Remaining Questions Display

  • The number of questions remaining will be displayed according to the response status.

Total Score Display

  • The total score will be displayed when all answers are completed and the quiz results are displayed.

    There are different types of total scores, including scores by aggregate category and calculated values for formulas.

    For more information, please click here.

Retry Permission

  • The quiz can start from the first question when the quiz taker has completed all the answers.

Question Number Display

  • Questions are assigned sequential numbers, such as Q1, Q2, ....

Endpoint Dialog Display

  • After all questions are answered, a pop-up quiz results page will be displayed.

Aggregate Graph Display

  • When all responses are completed and the quiz results are displayed, an aggregate graph such as a radar chart or horizontal bar graph will be displayed.

    For more information, please click here.

Cover Screen Display

  • When displaying the quiz, a cover screen with start button, etc. is shown.

Scoring Mode

  • When all answers are completed and the quiz results are displayed, a list of correct and incorrect answers and explanations of the choices will be shown.

    If the score of a choice is greater than 0, it is considered correct, and if the score of a choice is less than 0, it is considered incorrect and displayed.

    If you enter an explanation for each choice, the explanation can be displayed when you reach the quiz results.

Wallpaper Design Editing

This function allows you to change the wallpaper design of the design template.

You can add originality to your quiz by creating a wallpaper design, resulting in a more well-designed quiz.

Available from the button in the .

Wallpaper Design Editing

Uploading Source Images

  • Upload a material image to be used for the wallpaper.

    Once uploaded, the details of the uploaded image will be displayed as shown in the figure below. This operation will allow you to select images in the select boxes in each editing panel.

    Wallpaper Design Editing - Uploading Source Images

Wallpaper Design Editing

  • In the Wallpaper Design Editor, you can edit the wallpaper displayed in the Cover Window and Question Window, respectively.

    Background color, background image, and background image repeat method can be specified in detail from the select box, so try various combinations to find your favorite settings.

    A preview is displayed on the right side of the screen so you can refer to the setting values.

    Wallpaper Design Editing - Cover Window Sample

    When editing is complete, click the save button to exit.

    Go to the screen and click the button to reflect the wallpaper design edit in the production data.

  • The meanings of each of the main set values are as follows.

    Regarding the repetition method of background images

    : Repeat vertically and horizontally.

    : Repeat only horizontally.

    : Repeat only vertically.

    : No repetition.

    Regarding the size of background images

    : Maintains the original size of the image.

    : Scale the image as large as possible to fill the container. (The top, bottom, left and right sides of the overflowing image may be cropped.

    : Scale the image as much as possible so that the entire image fits into the container.

Check with Actual Templates

  • Let's move on to the screen to see how the edited wallpaper actually looks.

    As shown in the example below, the wallpaper of the cover window can be changed to any illustration as shown below.

    Check with Actual Templates

    As described above, this feature makes it easy to create your own original design for your quiz.