Ngx Quiz

Demo

Visit the Demo site

Installing

npm install ngx-quiz

Usage

Import NgxQuizModule

import {NgxQuizModule} from 'ngx-quiz';

@NgModule({
  imports: [
    NgxQuizModule
  ]
})

Usage

Use it in your template and then pass a Quiz object to the component as follows as an example

<ngx-quiz [quiz]="quiz"></ngx-quiz>

Configuration

Quiz

Property	Type	Description
name	string	The quiz name, if defined, will appear on the start and end screen
level	string	The quiz level, if defined, will appear on the start and end screen
duration	number	The quiz duration in ms, if defined, will appear on the start and end screen
automaticAdvance	boolean	Allows you to advance the question automatically after being answered
returnAllowed	boolean	Allows the user to return to the previous question
repeatAllowed	boolean	Allows the user to repeat the test when finished
emitReport	boolean	If set to true, the quiz will emit a report with the user's choices when finished
startScreen	StartScreen	Configure the intro screen. If omitted it will not be displayed
endScreen	EndScreen	Configure the end screen. If omitted, default values will be used
questions	Question[]	An array with the quiz questions

Question

Property	Type	Description
type	QuestionType	Type of question, for now only 'single' applies
title	string	Title of question
description	string	Description of question (optional)
displayImage	string	An url image to display in the question
answers	SingleAnswer	List of possible answers

SingleAnswer

Property	Type	Description
displayImage	string	An url image to display in the answer
displayText	string	Answer display text
value	number	Value of the answer (this computes for the final score

StartScreen & End Screen

Property	Type	Description	Default (Only in end screen)
title	string	Title to show on the screen	"Congrats!"
description	string	Description to show on the screen	"You just completed"
displayImage	string	Url image to show on the screen
buttonText	string	Text to display on the button	"Restart"

Quiz object example

const quiz: Quiz = {
  name: 'Angular',
  level: 'Beginner',
  duration: 480,
  automaticAdvance: false,
  returnAllowed: true,
  repeatAllowed: true,
  emitReport: true,
  startScreen: {
    title: '',
    description: '',
    displayImage:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png',
    buttonText: 'Start'
  },
  endScreen: {
    title: '¡Congratulations!',
    description: 'You complete the quiz!',
    displayImage:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png',
    buttonText: 'Restart'
  },
  questions: [
    {
      type: 'single',
      title: 'In Angular, you can pass data from the parent component to the child component by using:',
      description: 'Choose the correct answer',
      displayImage: 'https://cdn.searchenginejournal.com/wp-content/uploads/2019/04/the-seo-guide-to-angular-1520x800.png',
      answers: [
        {displayText: '@Output()', value: 100},
        {displayText: '@Input()', value: 0},
        {displayText: 'Output', value: 0},
        {displayText: 'Input', value: 0}
      ]
    },
    {
      type: 'single',
      title: 'Which directive connects the value of the controls to the data?',
      description: 'Choose the correct answer',
      displayImage: 'https://cdn.searchenginejournal.com/wp-content/uploads/2019/04/the-seo-guide-to-angular-1520x800.png',
      answers: [
        {displayText: 'ng-app', value: 0},
        {displayText: 'ng-init', value: 0},
        {displayText: 'ng-model', value: 100},
        {displayText: 'ng data', value: 0}
      ]
    },
    {
      type: 'single',
      title: 'In Angular routing, which tag is used to render matched component via active route?',
      description: 'Choose the correct answer',
      displayImage: 'https://cdn.searchenginejournal.com/wp-content/uploads/2019/04/the-seo-guide-to-angular-1520x800.png',
      answers: [
        {displayText: '<router></router>', value: 0},
        {displayText: '<router-output></router-output>', value: 0},
        {displayText: '<router-outlet></router-outlet>', value: 100},
        {displayText: '<router-display></router-display>', value: 0}
      ]
    }
  ]
};