How to Create an Online Quiz or Assessment test using SurveyJS and add Scoring and Timing to It (Part 1)

Introduction to the SurveyJS libraries and their benefits in education.

Online quizzes are a great way to engage your students and test their knowledge on a particular topic. With SurveyJS you can create multiple online assessment forms, add timing and scoring to them, customize their look, and provide immediate and personalized feedback to each student once they completed a test. 

In the first part of the article, we will explore the SurveyJS product family and guide you through the process of creating a timed online quiz using SurveyJS Form Library. The second part will be devoted to various scoring features that the Survey Creator library has to offer, including how to assign a score to a certain question or to each or some of its choice options, calculate the total score, and more.

Why choose SurveyJS for online assessment forms?

SurveyJS is a product family of four open-source JavaScript libraries that enable you to build a full-cycle form management system within your in-house infrastructure:

• SurveyJS Form Library - Enables you to configure and run forms and surveys on your website. (Free, open-source, under the MIT license).
• SurveyJS Creator - An embeddable no-code form/survey builder with WYSIWYG UI. (Free-to-use here, but requires a paid developer license for commercial use).
• SurveyJS Dashboard - Visualizes survey results as charts/tables in a dashboard.
• SurveyJS PDF Generator - Exports survey responses as PDF files.

Being a client-side component, SurveyJS Form Library supports native integration with React, Angular, Vue.js, Knockout, and for those, who prefer to use jQuery or any other JavaScript framework, it offers a special package that utilizes Knockout to render form widgets.
Once you've created a test app for your preferred frontend technology, you are ready to get started with SurveyJS.

Install and configure SurveyJS Form Library

As an example, we are going to add the library to a sample React app. But you can find a dedicated step-by-step guide on how to get started with SurveyJS for other JavaScript frameworks in the Documentation section.

1.1 Install the survey-react-ui npm package using the following command:

npm install survey-react-ui - save

1.2 Configure the style of your form by referencing either of the two built-in themes (CSS files):

// Default V2 theme
import 'survey-core/defaultV2.min.css';
// Modern theme
// import 'survey-core/modern.min.css';

Create a form model in JSON

1.3 Now, we are ready to create a model of our test, which will describe its layout and contents. The simplest way to create a form model is to use a JSON-based schema. This schema contains different sections and parts of our form. Here is what such a schema looks like for a sample 2-page geography test:

{
  title: "Geography test",
  description:
    "Test how well you know geography with this multiple-choice challenge and learn about the continents, countries, oceans and vast bodies of water that are part of planet Earth.",
  logo:
    "https://api.surveyjs.io/private/Surveys/files?name=7c80d870-2ce5-450a-8013-b40725991e89",
  logoPosition: "right",
  firstPageIsStarted: true,
  completedHtml:
    "<h4>You got <b>{correctAnswers}</b> out of <b>{questionCount}</b> correct answers.</h4>",
  completedHtmlOnCondition: [
    {
      expression: "{correctAnswers} == 0",
      html:
        "<h4>Unfortunately, none of your answers are correct. Please try again.</h4>"
    }
  ],
  pages: [
    {
      name: "startPage"
    },
    {
      name: "page1",
      elements: [
        {
          type: "radiogroup",
          name: "count_continents",
          title: "How many continents are there?",
          correctAnswer: "7",
          choices: ["4", "6", "5", "7"],
          colCount: 2
        },
        {
          type: "dropdown",
          name: "largest_continent",
          title: "What is the largest continent by land area?",
          correctAnswer: "Asia",
          choices: ["Antarctica", "Europe", "Asia", "Africa"]
        }
      ]
    },
    {
      name: "page2",
      elements: [
        {
          type: "radiogroup",
          name: "count_oceans",
          title: "How many oceans are there?",
          correctAnswer: "5",
          choices: ["3", "5", "4", "6"],
          colCount: 2
        }
      ]
    }
  ],
  maxTimeToFinish: 90,
  maxTimeToFinishPage: 30,
  showTimerPanel: "top"
}

Here’s a brief explanation of every property of the model:

• title: Displays the form’s title.
• description: Explanatory text displayed under the title.
• logo: Gets or sets a survey logo.
• logoPosition: Gets or sets a survey logo position.
• pages: Describes all the pages of the form. Here we have two different pages.

As you can see, there are two question types: a radio button group and a single selection drop-down menu. However, all other available question types can also be used to create a test. Please refer to the Page model and Question model API references to learn more about methods, properties, and events used in those classes. To turn a form into a test, the correctAnswer property has been specified for each question of the form.

Add time limits for self-pacing

Our sample test is also timed: the maxTimeToFinish property limits the time a student is allowed to spend to finish the entire test, and the maxTimeToFinishPage property limits the time allowed to answer all questions of a page. SurveyJS Form Library ships with other timing features, including test pausing and resuming that you can learn about in the Specify Time Limits guide.

Create personalized feedback pages

To make sure each test taker receives personalized feedback upon test completion, we used the completedHtmlOnCondition property. Let’s take a closer look at how it works and what other options to configure the feedback page are. By default, a SurveyJS form displays a basic ‘Thank you’ message at the end. If you want to customize the contents of this message, simply populate the completedHtml property with custom HTML markup. And if you deal with a test and you want to make sure each of your respondents sees an exact number of correct or incorrect answers, the markup should include one or some of the following placeholders:

• {correctAnswers} — The number of correct answers.
• {incorrectAnswers} — The number of incorrect answers.
• {questionCount} — The number of questions.

const surveyJson = {
    completedHtml: "<h4>You got <b>{correctAnswers}</b> out of <b>{questionCount}</b> correct answers.</h4>",
...
};

If you want to go further and provide custom feedback based on the number of correct/incorrect answers, populate the completedHtmlOnCondition array with a series of objects consisting of a Boolean expression (make sure to use the placeholders mentioned earlier) and HTML markup. Once an expression evaluates to true, a test taker sees the text from the related object in the ‘Thank you’ message.

const surveyJson = {
    completedHtmlOnCondition: [{
        expression: "{correctAnswers} == 0",
        html: "<h4>Unfortunately, none of your answers are correct. Please try again.</h4>"
    }, {
        expression: "{correctAnswers} == {questionCount}",
        html: "<h4>Congratulations! You answered all the questions correctly!</h4>"
    }]
};

Create a Survey Model and Render a Survey

1.4 Now, when the data schema is configured, you want to instantiate a model by passing the model schema to the Model constructor:

import 'survey-core/defaultV2.min.css';
import { Model } from 'survey-core';

const surveyJson = {
  //...
}

function App() {
   const survey = new Model(surveyJson);
   return …;
}
export default App;

1.5 To render a survey, import the Survey component, add it to the template, and pass the model instance you created in the previous step to the component’s model attribute:

import 'survey-core/defaultV2.min.css';
import { Model } from 'survey-core';
import { Survey } from 'survey-react-ui';


const surveyJson = {
   //...
};


function App() {
  const survey = new Model(surveyJson);

  return <Survey model={survey} />;
}


export default App;

You will also need to configure the storage of your test result. Please follow the Handle Survey Completion guide to get the instructions.

A Basic Geography Test Demo

Run the demo below to take the test and challenge your knowledge!

That’s all for now.

In the second part of the article, we will show you how to add scoring to an assessment form.