Jump to content
Graham Quince

Tutorial: Displaying personalised, custom data

Recommended Posts

I've been very aware that a number of Frog3 schools are disappointed there is no equivalent to Frog Tags in FrogLearn.  And I'm told it is something we want to rectify.  The ability for schools to display your own personalised data to students inside FrogLearn is an understandably desirable option.

While we work on an internal solution (no ETA I'm afraid), I've prepared a tutorial along with @Chris.Smith (our developer advocate) taking you through all the steps needed to set up a Google Firebase data store, query it from inside FrogLearn and display the results back in a Frog Site.

It looks intimidating, but I've broken it down into straight forward steps for the various stages.  Once set up, updating the data becomes a simple task - arguably with fewer steps than updating the data in Frog3's toolkit.

What this means is that you can display any information you choose to upload, so house points, your own rewards system, additional attainment information - anything you can get into a spreadsheet - provided you have a single student identifier in there such as UPN or username.  Being a Google product, Firebase is a secure data store - although being a third-party product, you should make that determination for yourself.


I hope this helps.


Link to comment
Share on other sites

12 hours ago, Laura.Pheasey said:

I am currently trying to work these instructions, having had no joy using the attainment widget. I can't figure out WHERE to paste the code from step 3, accessing your data. Can you advise, please?

Hi Laura

I'll drop you an email - this is a particularly tricky tutorial, as Firebase keeps changing their pages


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By Graham Quince
      Hi everyone,
      Here's a bit of CSS you can add to an HTML widget to hide the first three columns in the Data Viewer widget should you want to:
      <style> /* Hide first three columns in Data Viewer */ div[data-content-uuid="WIDGET_UUID"] .dataviewer-list th:nth-child(2), div[data-content-uuid="WIDGET_UUID"] .dataviewer-list th:nth-child(3), div[data-content-uuid="WIDGET_UUID"] .dataviewer-list th:nth-child(4), div[data-content-uuid="WIDGET_UUID"] .dataviewer-list td:nth-child(2), div[data-content-uuid="WIDGET_UUID"] .dataviewer-list td:nth-child(3), div[data-content-uuid="WIDGET_UUID"] .dataviewer-list td:nth-child(4){ display: none !important; } </style>  
  • Create New...