Many schools have told us they wish to display personlised data beyond what is possible using the Attainment widget. Due to security concerns, it is not currently possible to use FrogLearn to hold custom data without exposing it to all users. The development roadmap for FrogCode does include such systems, but if you'd rather not wait, this tutorial might do in the meantime.
The method below works, but does use a 3rd-party product over which Frog Education has no control.
Google's web services platform offers a free-to-use database (for up to 100 simulataneous connections). Your Google account (personal or G-Suite) can be used to login.
100 connections may not sound like a lot, but provided you do not have the following code set on your homepage (and even then) it is unlikely to be an issue for you. Once the data is retrieved, Frog does not stay connected to Firebase.
While this tutorial may appear intimidating, all the steps are laid out and once you have your data displaying as you wish, you will only need to repeat the importing data section to update your school's information.
Fill out the wizard, giving your project a name and setting the location to the correct country, then click CREATE PROJECT
On the next screen, click on Authentication, then click SET UP SIGN-IN METHOD
Click Anonymous, then Enable and finally click SAVE
This stage allows FrogLearn to query the data without being requiring a user to log in to an IdentityProvider. Your data is still secure though, as an Application ID and Secret are required.
Importing your data
At this stage, we're making the assumption that your school's Data Manager has provided you with a spreadsheet containing a list of your students and their grades, points etc... You need to ensure this data also contains the students' UPN as this is the unique reference we will be working with.
If you cannot use the UPN, you many need to use a VLOOKUP to merge another field from Frog's getUser() api. For more about getUser(), click here to read this tutorial.
Step 1 - Preparing your data
Ensure your UPN column is the first column in your spreadsheet, then save your worksheet as a CSV file. Make sure there are no commas in any field.
Example data: UPN's are typically much larger than this example.
We're using older grade labels (A-E) to illustrate the CSV can contain any data
In order to import our data into Firebase, we must first convert it from a CSV file to a JSON file. The easiest way to do this is via another 3rd party website, CSVJSON.com
Click on Select a file... and upload your CSV file. Check the Hash radio button. Then click >Convert
The UPN becomes the key used to search and return data
Your CSV will automatically convert to a JSON format.
Copy the data from the JSON panel into Notepad and save the file with a .JSON extension, e.g. data.json
Switch back to Firebase and click on Database link (left-hand menu), then click on the ... link on the right-hand side
Choose Import JSON and upload your .JSON file
Firebase will import your data and display it as an expandable list with your UPNs as the name of each set of data.
On importing, your new data will overwrite any previous data. If you wish to keep previous data, you will need to create a new Firebase project per data set.
Accessing your data
In your Firebase project on the overview page, click on the Add Firebase to your web app link.
A pop up will appear looking similar to this:
Firebase's instructions say to copy all of this code, but due to FrogLearn's security, we are only interested in the config data. FrogLearn prevents external scripts from being imported, so we have another method to including the script.
Copy the code below and paste in the config files from Firebase.
Note the comments, especially the bit about setting a student's upn for admin accounts.
The data stored in Firebase has been pulled in securely and has only accessed the individual's information, based on their UPN. How you choose to lay this out is now entirely up to you.