Create a quiz app to assess online learning

Quickly test an online learner's understanding of course material

As learning and collaboration moves online in response to the coronavirus and COVID-19 pandemic, developers need to build microservices to enable distance learning. As part of that learning, instructors need to be able to assess their students’ understanding of course material.

This tutorial shows you how to build a simple quiz app to assess learner understanding. A major benefit of the app is its flexibility: this starter kit can easily be adapted into a short essay app, a grading app, or other educational tool.

Learning objectives

By completing this tutorial, you will learn how to create a simple example quiz application that uses a Loopback-generated Express app with a React front end.

Prerequisites

The core of this example is generated code from the Loopback utility. For clarity, we’re using the now-deprecated version 3.0 of the Loopback library. This makes the app easier to start, but you should consider upgrading to Loopback v4 to get the latest features and security updates.

Estimated time

Completing this tutorial should take about 30 minutes

Architecture diagram

The user navigates to the site.

The user is presented with a website, a React front end.

(a) The user performs an action within the Express app. (b) The LoopBack-generated code performs the necessary task within the Express app.

Changes are saved in a PluggableDB.

1. Set up your environment

To get the most out of this starter kit, you should consider creating your own Loopback app. It’s super fast!.

However, to start this app, use the following steps. (Note: To use pre-created data and React builds, see Quickstart instructions, below.)

Run the following commands.

npm install
npm serve

When the API is up, navigate to the Swagger API explorer at https://localhost:3000/explorer. From there, you can start to add data into your API right away.

2. Create the app front end

The app front end is coded in React, a library for user interfaces. If you don’t have experience with React, or if you want to use something simpler, you can achieve similar results using tools such as Bootstrap and jQuery. The front-end code is compiled once and then served by the Express app generated by Loopback.

3. Deploy on IBM Cloud

To deploy using Kubernetes, use the included manifest in deployment/deploy.yaml. Note: If you are using Ingress, you must populate the Ingress hostname with the Ingress subdomain of your cluster. For example:

Summary

In this tutorial, you’ve learned how quickly you can create and configure an app to assess how well students have absorbed instructional material. You’ve also seen how simple it is to adapt the quiz app to other educational requirements. You have have everything you need to create a simple, flexible tool to assist teachers and students who are making an unprecedented shift to online learning.