Tutorial

Back to Tutorials

Displaying personalised, custom data

Using 3rd-party systems

Explore... Our MAT Solution

Share this Page

Make it personal


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.
 

Firebase

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.
 

Updating 

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.
 

 

Setting up

Step 1 - Set up a Firebase project


Open FireBase

 

Step 2


Click on the GET STARTED FOR FREE link
 


 

Step 3


Click CREATE NEW PROJECT
 

Step 4


Fill out the wizard, giving your project a name and setting the location to the correct country, then click CREATE PROJECT
 


 

Step 5


On the next screen, click on Authentication, then click SET UP SIGN-IN METHOD
 


 

Step 6


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
 

Step 2


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
 

CSVJSON


 

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.
 

Step 3


Copy the data from the JSON panel into Notepad and save the file with a .JSON extension, e.g. data.json
 

Step 4


Switch back to Firebase and click on Database link (left-hand menu), then click on the ... link on the right-hand side
 


 

Step 5


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

Step 1


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:
 


 

Step 2


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.
 

    apiKey: "AIzaSyBkcuqk_2tS-Tv9MhQ-Y9jtzBi0dsaRA8k",
    authDomain: "personalised-data-f54cf.firebaseapp.com",
    databaseURL: "https://personalised-data-f54cf.firebaseio.com",
    storageBucket: "personalised-data-f54cf.appspot.com",
    messagingSenderId: "523326713958"

Step 3


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.
 

<script>
    var s = document.createElement('script'),
        user = FrogOS.getUser(),
        upn = user.attr('pupil_number'),
        widget = this;
    
    if (user.attr('profile').name === "Admin") {
        /* Choose a student's upn, so that as an admin you can see data being returned */ 
        upn ="12345";
    }
    
    s.onload = function() {
        // Initialize Firebase
        var config = {
            /* Paste config files here, replacing this example */
            apiKey: "AIzaSyBkcuqk_2tS-Tv9MhQ-Y9jtzBi0dsaRA8k",
            authDomain: "personalised-data-f54cf.firebaseapp.com",
            databaseURL: "https://personalised-data-f54cf.firebaseio.com",
            storageBucket: "personalised-data-f54cf.appspot.com",
            messagingSenderId: "523326713958"
        };
        firebase.initializeApp(config);
        firebase.auth().signInAnonymously().catch(function(error) {
            // If there is an error connecting to the database
            // https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInAnonymously
            widget.element.html(
                $('<div>').addClass('alert alert-error')
                    .text('Unable to connect to database at this time')
            );
        }).then(function() {
            firebase.database().ref('/'+upn).once('value')
                .then(function(snapshot) {
                    var student_data = snapshot.val();
                    
                    widget.element.html(
                        $('<div>').addClass('alert alert-success')
                                .html(
                                    // do html stuff here
                                    student_data.Forename+" "+
                                    student_data.Surname
                                )
                    );
                
                    if (!student_data) {
                        /* If there is no data for the student's upn */ 
                        widget.element.html(
                            $('<div>').addClass('alert alert-info')
                                .text('Unable to retrieve data at this time')
                        );
                    }
                    firebase.database().goOffline()
                });
        });
    };
    s.src = "https://www.gstatic.com/firebasejs/3.6.1/firebase.js";
    document.head.appendChild(s);
</script>

 

As a proof of concept / working model, you should now be able to see a nominated student's name.  We can now use standard HTML with Javascript to choose how we set out our data.
 

Displaying Data

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.
 


 

<style>
.customTable {
    border-radius:10px 10px 0px 0px;
    overflow:hidden;
    font-size:16pt;
    width:100%;
    -webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.75);
    padding:10px;
    text-align:center;
    width:50%;
    float:left;
}
.customTable th {
    background:#0071b9;
    color:#FFFFFF;
    height:30px;
    padding:10px;
    margin:10px;
}
.customTable td {
    padding:10px;
}
.customCircle {
    height:100px;
    width:100px;
    border-radius:50px;

    line-height:20px;
    font-size:16pt;
    vertical-align:middle;
    text-align:center;
    margin:10px;

    border:1px solid #0071b9;
    -webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.75);
    float:left;
    overflow:hidden;
}
.customCircle span {
    height: 100px;
    display: inline-block; 
    vertical-align: middle; 
}
.customCircle p {
    display: inline-block; 
    vertical-align: middle; 
}
</style>

<script>
    var s = document.createElement('script'),
        user = FrogOS.getUser(),
        upn = user.attr('pupil_number'),
        widget = this,
        $CustomFieldTable = $("<div>"),
        $CustomFieldDisplay = $("<div>");
    

       $CustomFieldTable.html(
           '<table class="customTable">'+
           '<tr>'+
           '<th>Subject</th>'+
           '<th>Target</th>'+
           '<th>Grade</th>'+
           '</tr>'+
           '</table>'
        )

       
    
    if (user.attr('profile').name === "Admin") {
        /* Chose a student's upn, so that as an admin you can see data being returned */ 
        upn ="12345";
    }

    
    s.onload = function() {
        // Initialize Firebase
        var config = {
            /* Paste config files here, replacing this example */
            apiKey: "AIzaSyBkcuqk_2tS-Tv9MhQ-Y9jtzBi0dsaRA8k",
            authDomain: "personalised-data-f54cf.firebaseapp.com",
            databaseURL: "https://personalised-data-f54cf.firebaseio.com",
            storageBucket: "personalised-data-f54cf.appspot.com",
            messagingSenderId: "523326713958"
        };
        firebase.initializeApp(config);
        firebase.auth().signInAnonymously().catch(function(error) {
            // If there is an error connecting to the database
            // https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInAnonymously
            widget.element.html(
                $('<div>').addClass('alert alert-error')
                    .text('Unable to connect to database at this time')
            );
        }).then(function() {
            firebase.database().ref('/'+upn).once('value')
                .then(function(snapshot) {
                    var student_data = snapshot.val();
                    $CustomFieldTable.find('tbody').append(
                                    '<tr>'+
                                    '<td>English</td><td>'+student_data.EnglishCG+'</td>'+
                                    '<td>'+student_data.EnglishTarget+'</td>'+
                                    '</tr><tr>'+
                                    '<td>Maths</td><td>'+student_data.MathsCG+'</td>'+
                                    '<td>'+student_data.MathsTarget+'</td>'+
                                    '</tr>'
                    );
                    $CustomFieldDisplay.html(
                                    '<div class="customCircle"><span></span><p>ATL:<br>'+
                                    +student_data.ATL+
                                    '</p></div>'+
                                    '<div class="customCircle"><span></span><p>House Points:<br>'+
                                    +student_data.HP+
                                    '</p></div>'                
                     );
                     widget.element.append($CustomFieldTable);
                     widget.element.append($CustomFieldDisplay);
                
                    if (!student_data) {
                        /* If there is no data for the student's upn */ 
                        widget.element.html(
                            $('<div>').addClass('alert alert-info')
                                .text('Unable to retrieve data at this time')
                        );
                    }
                });
        });
    };
    s.src = "https://www.gstatic.com/firebasejs/3.6.1/firebase.js";
    document.head.appendChild(s);
</script>

Tutorials in this series...

Quicklinks