Jump to content

How can I display custom, personal data to my students?


K.Ermit

Recommended Posts

We have ( meetings planned for each student / their option choices / personal tutorial links / something else not driven by our MIS ) and wish to use Frog to display this data just for the student and their parents.  

Is this possible to do in FrogLearn?

Link to comment
Share on other sites

Lots of you have been asking for a way to get custom, personalised data to display inside Frog.  While we're looking at different development solutions, this is an approach I have been using successfully with a few schools.

NOTE:  

Thanks to the FrogCode widget, you can now upload data into a form in Frog.  This is probably a simpler solution (and more importantly can provide data security) than the one outlined below.
https://schools.frogeducation.com/community/frogcode/frogcode-showcase/data2form

 

 

NOTE about this solution
All the data is loaded into the browser.  While not easily found, it is there for someone who knows what they are doing.  It cannot be stressed enough that if you have any concerns about the contents of this data you should not use this method below.  
SIMS schools with FrogParent can use the Linked Documents tool to publish reports which are only available to the individuals involved.

 

 


Step 1 - Wrangling your data
Frog's API can be used to identify the logged in user.  We need to provide our data in a format which places one of the common identifiers first.  

Common identifiers:

  • UUID (Frog's own ID)
  • UPN
  • Roll Number (MIS ID)
  • Username

The first thing you have to ensure is that your data contains one of these fields.  The rest of this guide is going to focus on Roll Number as this is element to requires an extra step to extract.  

Open your spreadsheet program of choice, MS Excel for instance.  

In this example, we have a parents evening list.  Each child as a separate time slot and note the roll no. column.

data - example.PNG


Next we're going to use Excel's formula to reformat our data.  In a new sheet, copy the formula into the top-left cell:

="'"&Sheet1!D2&"':{'time':'"&TEXT(Sheet1!A2,"HH:mm AM/PM")&"','date':'"&TEXT(Sheet1!B2,"mm/dd/yyyy")&"','room':'"&Sheet1!C2&"','regclass':'"&Sheet1!G2&"','surname':'"&Sheet1!E2&"','firstname':'"&Sheet1!F2&"'},"

This formula might look intimidating, but it's actually quite simple:

= - opens the formula function

"'" - double quotes " are used in Excel to accept plain text.  We then use a single quote ' inside there

& - is Excel's addition.  So we have ' and then we add the contents of Sheet1!D2 to it

"':{'time':'" - this closes off our first single ' and then gets ready the first value, in this case time,

TEXT(Sheet1!A2,"HH:mm AM/PM") - points us to Sheet1!A2, where the time value is, but to ensure Excel does not give us just a number, we force it to stay in a time format.

And the rest of the row is built up in the same way.

Once completed, our row looks like:

'123456':{'time':'06:00 PM','date':'16th June','room':'Main Hall','regclass':'1st','surname':'Hartnell','firstname':'William'},

Where 123456 is William's roll number.


Drag this cell down, to replicate the contents for each row.

data - 2.PNG

 

Step 2 - Displaying your data
Create your site and add an HTML widget.

Paste in this code:

<div class="Greeting widget_text" style="font-size:16px;"> </div>
<div class="Time widget_text" style="font-size:16px;">Time: </div>
<div class="Date widget_text" style="font-size:16px;">Date: </div>
<div class="Room widget_text" style="font-size:16px;">Room: </div>

<script>

var myData = {
 /////// PASTE FROM HERE /////

'123456':{'time':'06:00 PM','date':'16th June','room':'Main Hall','regclass':'1st','surname':'Hartnell','firstname':'William'},


 /////// PASTE TO HERE - DELETE THE LAST COMMA!!!!!!! /////
}

var user = FrogOS ? FrogOS.getUser() : this.getUser();
if (user.profile.type == "admin") {
    user.uuid = "D123443432435435454354354"; // Student UUID
}
    
if (user.profile.type == "parent") {
    Frog.Model.api('users.getChildren').done(function(parentResponse) {
        var children = parentResponse.data;
        $.each(children, function(index,child) {
            getAppointment(child.uuid,child.displayname,'parent');
        })
   });
} else {
    getAppointment(user.uuid,user.displayname,'child');
}

function getAppointment(childUUID,childName,view) {
    var self = this;
    Frog.Model.api('users.getDataInCategory', {
        user_uuid: childUUID,
        uuid: '789F77FF2004CA84FA300F17417DDB0890FECF0CD03FC350' // Users category UUID
    }).done(function(listResponse) {
        var roll_number = listResponse.data.fields[0].value;

        if (view == 'parent') {
            $('.Greeting').append(myData[roll_number].firstname+"'s appointment is at:");
        } else {
            $('.Greeting').append("Your appointment detaiils:");
        }
        
        $('.Time').append(myData[roll_number].time);
        $('.Date').append(myData[roll_number].data);
        $('.Room').append(myData[roll_number].room);

    });
}         
</script>

Add the rows from Excel in the ///////////////// space

Make sure to delete the last comma on the last row

 


What this code is doing:


var user = FrogOS ? FrogOS.getUser() : this.getUser();   - gets the currently logged in user

 

if (user.profile.type == "admin") { - if the user is an Admin, use a student's Frog ID to test the system

 

if (user.profile.type == "parent") { - if the user is a Parent, use Frog's getChildren API to identify and list their children.

 

getAppointment(user.uuid,user.displayname,'child'); - runs a function, passing it the user's UUID, their displayname and if they are a child or parent.  For parents this will run for each child.


Frog.Model.api('users.getDataInCategory', {  - Frog's API to get the information displayed in the Users' App, under the Additional Information category


uuid: '789F77FF2004CA84FA300F17417DDB0890FECF0CD03FC350' // Users category UUID - this is different in each school.  To get this UUID, do the follow:

  1. Open the browser's developer console and switch to the network tab.
     
  2. Open the Users App
     
  3. Search for a student and click on their name
     
  4. Use this logo to clear the information in the Network Tab
           clear.PNG
     
  5. In Users, Click on Additional Information
     
  6. A line of text, beginning with ?method=users.getDataInCategory appears in the network area.  This is the API call.  
     
  7. Click on Preview and expand the params section
    API category.PNG

     
  8. Copy this UUID and paste replace the Users Category UUID with it.


var roll_number = listResponse.data.fields[0].value; - this line retrieves the student's roll number, which we can now use to identify the row of data in the object we created earlier.


$('.Time').append(myData[roll_number].time); - The first element identifies the DIV we created at the very top of the code.  We then append the corresponding information into that DIV based on the roll number.

ANOTHER NOTE
Student UPNs are available in FrogOS ? FrogOS.getUser() : this.getUser(); as user.pupil_number (also username as user.username), so you can use a cut down version of the getAppointment function:

function getAppointment(childUPN,childName,view) {

        if (view == 'parent') {
            $('.Greeting').append(myData[childUPN].firstname+"'s appointment is at:");
        } else {
            $('.Greeting').append("Your appointment detaiils:");
        }
        
        $('.Time').append(myData[childUPN].time);
        $('.Date').append(myData[childUPN].data);
        $('.Room').append(myData[childUPN].room);

}   

      

AND YET ANOTHER
It's worth checking your code with a tool likehttps://esprima.org/demo/validate.html
This is check for errors and breaks.  

O'Brien and similar names will need to have their ' replaced.


Make sure you delete the last comma from your Excel code.


FINAL REMINDER
Use with caution regarding personal data.  I'm not going to demonstrate in this tutorial where exactly you can find the data, but it is there. 

  • Like 1
Link to comment
Share on other sites

With Quincey help we have use this to display a letter to Students/Parents letting them know about a personal 1 to 1 meeting with a member of staff in school!!!  Thanks again!

  • Thanks 1
Link to comment
Share on other sites

19 minutes ago, ADT said:

With Quincey help we have use this to display a letter to Students/Parents letting them know about a personal 1 to 1 meeting with a member of staff in school!!!  Thanks again!

You weren't the only ones, this week alone I've had requests from 3 other schools.

Plus, once I got you started you did most of it yourself, which gave me the idea to share it as a tutorial.

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...