How to Create a Medical Symptom Checker with JavaScript

Checking medical symptoms on the internet has gained in popularity (60-80% of internet users Google their symptoms). Everybody wants to find out the potential disease underlying a health condition. For this reason, an increasing number of health websites are providing a symptom checker for their users.
In this tutorial we are going to walk through the step by step process of how you can create your own symptom checker Web application. To start off fast, the first part of this tutorial labeled “Fast track” will make use of a complete sample avatar package. Then the second part, labeled “Advanced track,” will dive deeper into creating a customized symptom checker with the help of a JavaScript Library and your own HTML/ PHP files. This tutorial makes use of the free tier of a symptom checker Web Service to show how anybody can offer a medical symptom checker on their website.

Creating a symptom checker involves the following requirements and steps (Fast track):

  1. A subscription to a Symptom Checker API, i.e. the free tier of the ApiMedic Symptom Checker.
  2. A Symptom Checker avatar for making the functionality visually available.
  3. A Web Hosting plan (supporting PHP) including a domain to upload your files to.
  4. A FTP client to upload your prepared files to your Web domain.

Step 1: Create an account for a Symptom Checker API (i.e. ApiMedic).

Sign up for the Symptom Checker API (registration page). Once you fill in the form you will receive an activation link via e-mail. After the activation you can log in, check out the Documentation and play around with the demo application. Then you have two possibilities to use the Symptom Checker API:

  • Sandbox API usage: The sandbox serves for testing purposes, for which you will receive credentials automatically within 12 business hours of registering for the API. With access to the sandbox API, you will be able to access mock data for testing purposes. Notice that in this case you should use and as your API endpoints in your code (see below for where this is included in the Source Code example in the second part of this tutorial labeled ”Advanced track”). We will skip this part and explain how to use the sandbox API access for the «Advanced track» further below. In this first Fast Track part, we will use a premade fully working symptom checker avatar into which we can plug the Live API access credentials directly.
  • Live API usage: The free tier of the Live API account has a limitation of 100 diagnoses per month. This account should be ordered to include real symptom checker data. In this case the symptom checker will process real data and to do so you should use and as the API endpoints in your code (see below for where this is included in the source code example in the second part of this tutorial labeled “Advanced Track”). To order these credentials  you should log in into the Symptom Checker API Developer Portal (login page) and access the following link to register for the “Basic (free)” package. You will receive your credentials via e-mail after a successful verification.

Step 2: Download a premade symptom checker avatar and parameterize it

You can get a premade fully working symptom checker avatar by following this link. There you will find a Javascript Library which includes a User Interface for a premade symptom checker avatar that’s ready to use with your Symptom Checker API credentials. Proceed as follows after clicking the link above:

Click on the “Download ZIP” button and your browser will trigger the download of all code examples into your downloads folder. Then navigate into the downloaded “” file to find the folder “SampleAvatar”. Copy this folder and place it on your desktop.

Navigate in the folder to find the “index.php” file and open it with any HTML editor (i.e. Notepad++). You will get the following view:

You need to make three changes:

  1. Replace YOUR_USERNAME with your Live API user id. Replace YOUR_PASSWORD with your Live API password (always make sure that in the code you leave the markings “” in the code and do not delete them).
  2. As you will be using the Live API services, change to (see explanation in Step 1).
  3. As you will be using the Live API services, change to (see explanation in Step 1).

Now save the files with these changes.

Step 3: Go to your Web hosting provider or create a new Web hosting plan.

If you don’t have an existing Web server with PHP support, you can create a Web Hosting plan including a Web domain with Dreamhost. If needed you can enable FTP access in the “Manage users” section of your Web Hosting plan (here) to ease upload of your page to the Web.

Step 4: Upload your prepared Symptom Checker avatar to your Web Server using an FTP client (i.e. FileZilla).

You can download a free FTP client from FileZilla. With help of this or another FTP client, you will access the FTP folder of your Web Server using your FTP credentials from the previous step 3. After logging into your FTP folder you can drag and drop your files from your Desktop to the FTP folder:

Congratulations! You have successfully published your first version of symptom checker to the Web. Go to and you will see a fully functioning version similar to the following one, which is accessible on the website of the Symptom Checker API’s provider:

Creating a customized symptom checker involves the following requirements and steps (Advanced track):

In this second part of the tutorial, you are going to deep dive into the different elements of the symptom checker avatar to create a customized version of it by replacing parts of the premade symptom checker. This will help you to understand which part is doing what so that after this tutorial, you are able to further customize it.