Jump to content
Phil Stiles

Get Positive Behaviour Totals for logged in student

Recommended Posts

Hi, I am trying to create a widget that is able to pull the Total Positive Behaviour Points into a variable, the end result is we will use an if statement to display a specific image depending on a number of points the student has.

I have started by testing with the HTML widget. using the below code to see if I can use the behaviour.getBehaviourTotals API to get the total points this year for the user, however, it is not working.

<script>
var $ap,user;
    
//Create a div, and give it a unique ID
$ap = $("div", {
    id: Frog.Utilities.generateSimpleID()
    }
);
$ap.html(
    '<b>Your House Points:</b>'+
    '<table clase="table" id="your_points">'+
        '<tr>'+
               "<th>This Year</th>"+
        '</tr>'+
       '</table>'
);
    
// Use Frog's API to get the logged in student
    user = FrogOS.getUser();

// Use Frog's API to get Behaviour points
Frog.Model
    .api('behaviour.getBehaviourTotals',{
    Student_uuid: user.uuid,
}).done(function(behaviourResponse){
    behaviourResponse.data.pos.year(function(work){
      $ap.find('tbody')
    .append(
        '<tr>'+
            '<td>'+
            data.pos.year+
            '</td>'+
        '</tr>'
    );   
   });
   
});
arguments[0].append($ap);
</script>

any advice appreciated.

Phil

  • Like 2

Share this post


Link to post
Share on other sites

I'll have a look in the morning. When you say that it isn't working, do you mean you're getting an error? If so, can you post a screenshot of it? @Phil Stiles

Share this post


Link to post
Share on other sites

@Phil Stiles

Quick look at your code, but just guessing as I haven't been able to check..

// Use Frog's API to get Behaviour points
Frog.Model
    .api('behaviour.getBehaviourTotals',{
    Student_uuid: user.uuid,
}).done(function(behaviourResponse){
    behaviourResponse.data.pos.year(function(work){
      $ap.find('tbody')
    .append(
        '<tr>'+
            '<td>'+
            data.pos.year+
            '</td>'+
        '</tr>'
    );   
   });

Check the following

lower case on student_uuid: user.uuid,

your $ap doesn't have a <tbody>. Not sure if this would cause jquery a problem or not.,

so why don't you try...

// Use Frog's API to get Behaviour points
Frog.Model
    .api('behaviour.getBehaviourTotals',{
    Student_uuid: user.uuid,    //obviously change to the uuid of an actual student
}).done(function(behaviourResponse){
console.log(behaviourResponse.data.pos.year) //this should give you an output in the console
   //what about...
  $ap.find("#your_points").append("<tr><td>"+behaviourResponse.data.pos.year+"</td></tr>");
   });

Paul

  • Thanks 1

Share this post


Link to post
Share on other sites

Try:

<table class="housepoints">
    <tbody></tbody>
</table>

<script>
var user;

    // Use Frog's API to get the logged in student
    user = FrogOS.getUser();

// Use Frog's API to get Behaviour points
Frog.Model
    .api('behaviour.getBehaviourTotals',{
    student_uuid: user.uuid,
}).done(function(behaviourResponse){   
    this.element.find('tbody').append(
        '<tr><td>' + behaviourResponse.data.pos.year + '</td></tr>'
    );
}.bind(this));
</script>

@Phil Stiles

  • Thanks 1

Share this post


Link to post
Share on other sites

HI @adamw and @pconkie many thanks for your input, I have taken a look with a fresh set of eyes and using the below code I can get the Positive Behaviour Points out of Frog using the getBehaviourTotals API. I can verify the results in the browser console and see that the variable hp also shows the correct number of points.

<script>
// Setup Variables    
var user, hp;
// Use Frog's API to get the logged in student
user = FrogOS.getUser();
// Use Frog's API to Get Behaviour Totals    
Frog.Model
    .api('behaviour.getBehaviourTotals', {
    student_uuid: user.uuid,
}).done(function(getBehaviourTotals){
// Ouput to Console Response from API for Possitive Achievement Points for the Year
    console.log(getBehaviourTotals.data.pos.year);
// Assign Possitive Achievement Points for the Year to a Variable
    hp = getBehaviourTotals.data.pos.year
// Confirm Possitive Achievement Points for the Year have been assinged to a Variable
    console.log(hp);
})
</script>

I would like to set up a widget using frog code to display the result of variable hp to start with, I then hope to expand this to then display an image that relates to the value of hp,
I have copied my code above into the widget.js as below.

        /**
         * Event fired by the Site Controller.
         *
         * @event 'widget.live'
         */
         'widget.live': function(el, ev, data) {
            this.element.html(
                this.view('main.ejs')
            );
			// Setup Variables    
			var user, hp;
			// Use Frog's API to get the logged in student
			user = FrogOS.getUser();
			// Use Frog's API to Get Behaviour Totals    
			Frog.Model
    			.api('behaviour.getBehaviourTotals', {
    			student_uuid: user.uuid,
				}).done(function(getBehaviourTotals){
			// Ouput to Console Response from API for Possitive Achievement Points for the Year
    		console.log(getBehaviourTotals.data.pos.year);
			// Assign Possitive Achievement Points for the Year to a Variable
    		hp = getBehaviourTotals.data.pos.year
			// Confirm Possitive Achievement Points for the Year have been assinged to a Variable
    		console.log(hp);
 			}) 
			document.getElementById("HP").innerHTML = hp
        	},

and added to Main.ejs the code below.

<!-- <img src="externalapps/icon/B44849BA2001BC0FE4E75F41CBB20A0B0DC5F45C78B10515" /> -->
<div class="packaged-widget-placeholder--container">
    <h3 class="packaged-widget-placeholder--title">
        <%= app._('widget.placeholder.title') %>
    </h3>
    <p class="packaged-widget-placeholder--text">
        <%= app._('widget.placeholder.text') %>
    </p>
<h3>Total HP <span id="HP"></span></h3>
</div>

With the aim that the number of points would be displayed in Span ID HP, however, I get undefined when testing with a student.

image.thumb.png.55b69d67edc9c505c399d50241967e01.png

Any advice or recommendations appreciated.

 

Share this post


Link to post
Share on other sites

@Phil Stiles

The problem you're having is that you're setting the hp variable inside the api done callback function, which you can't access from outside - so your code that access the variable:

document.getElementById("HP").innerHTML = hp

Won't find anything. Also, because the call is asynchronous, it will actually try and render that variable on the page before it's gotten the result back from the API. The fix should be quite simple, all you need to do is to write the variable to the page inside the done function. I haven't tested this, but try something like the following::

         'widget.live': function(el, ev, data) {
            this.element.html(
                this.view('main.ejs')
            );
    			// Setup Variables    
    			var user;
    			// Use Frog's API to get the logged in student
    			user = FrogOS.getUser();
    			// Use Frog's API to Get Behaviour Totals    
    			Frog.Model.api('behaviour.getBehaviourTotals', { student_uuid: user.uuid }).done(function(getBehaviourTotals) {
            		var hp = getBehaviourTotals.data.pos.year;
                    this.element.find('#HP').html(hp);
                }.bind(this));

        	}

Let me know how you get on!

Share this post


Link to post
Share on other sites

What Adam said.

You also have to get your head around that fact that somebody somewhere may drag two or more of your widgets onto the same page. If you use code like document.getElement then you risk one widget interfering with another. 

Using ‘this’ per Adams code, which refers to self ie the current widget instance, avoids this.

if you have the images, your next step will be to upload them to the assets folder of your widget project.

keeping you future code inside the done event of the api call you could do something like this...

if (hp < 10) {

  this.element.find(“#HP”).html(“<img src=‘link to pic’/>”);

if (hp > 9 && hp < 15) {

  this.element.find(“#HP”).html(“<img src=‘link to pic2’/>”);

etc

Share this post


Link to post
Share on other sites

Many thanks, @adamw and @pconkie.

All is now working as expected below is the end result.

image.png.f731f044f8b4790f9e52bec7e0145a46.png

Out of curiosity what is the correct way to point to the image files that I have uploaded to the assets folder currently have the widget pointing to the full URL of the image?

<img src="https://vle.abbey.kent.sch.uk/app/file/resource/41CAA2D520030AC47386EF22BF76740FF54BB32C69E11787?1539856225"/>

kind regards

Phil

  • Like 1

Share this post


Link to post
Share on other sites

This is exactly what i want to do.................  This is epic!! :D

Share this post


Link to post
Share on other sites

Can you post the full code you are using??

Share this post


Link to post
Share on other sites

 

Hi @ADT

So this is still a work in progress.

main.css

[data-name="Widget.TopFrogPoints"].widget-content {
  background: none;
  text-align: center;
  width: 100%;
  margin: 0;
}
.edit [data-name="Widget.TopFrogPoints"].widget-content {
  border: 1px solid #ccc;
  border-radius: 6px;
}
[data-name="Widget.TopFrogPoints"].widget-content img {
  margin-bottom: 5px;
 -webkit-border-radius: 10px; 
  border-radius: 10px; 
}
[data-name="Widget.TopFrogPoints"].widget-content .view {
  width: 200px;  
  margin: 0 0 15px; 
  overflow: hidden; 
  padding:10px 10px 0px 10px; 
  -webkit-border-radius: 10px; 
  border-radius: 10px; 
  background: -moz-linear-gradient(top,  #4495D1 0%, #02428D 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #4495D1 0%,#02428D 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,#4495D1 0,#02428D 100%);
  border:1px solid #147375; 
  color:white; 
  text-shadow: 0px 1px 1px #4d4d4d;
}
[data-name="Widget.TopFrogPoints"].widget-content #TOPFROG {
    width: 50px; 
    height: 50px;
}

main.ejs

<!--set content zone view, size and style set in main.css -->
<div class="view">
    <!-- Set span TOPFROG this is where widget.js will display image assets, Size set in main.css-->
	<span id="TOPFROG"></span>
    <h4>Total House Points</h4> 
    <h3>
        <!-- Set Span HP, this is where the number of points will be displayed -->
        <span id="HP"></span>
    </h3>
</div>

widget.js

/**
         * Event fired by the Site Controller.
         *
         * @event 'widget.live'
         */
        'widget.live': function(el, ev, data) {
            this.element.html(
                this.view('main.ejs')
            );
            // Setup Variables    
    			var user;
    			// Use Frog's API to get the logged in student
    			user = FrogOS.getUser();
    			// Use Frog's API to Get Behaviour Totals    
    			Frog.Model.api('behaviour.getBehaviourTotals', { student_uuid: user.uuid }).done(function(getBehaviourTotals) {
            		// get positive behaviour totals for the year and add to variable hp
                    var hp = getBehaviourTotals.data.pos.year;
                    //Show total behaviour totals in span HP. see main.ejs
                    this.element.find('#HP').html(hp);
                    // If House points less than 10 show Frog Tadpole image asset
                       if (hp <10) {
                           this.element.find('#TOPFROG').html('<img src="https://vle.abbey.kent.sch.uk/app/file/resource/41CAA2EB20030F33930FAFBC7701300370C8617C47543FDB?1539849442"/>')
                       }
                    // If House points more than 9, but less than 20 show Frog Teen image asset
                    if ( hp > 9 && hp < 29) {
                           this.element.find('#TOPFROG').html('<img src="https://vle.abbey.kent.sch.uk/app/file/resource/41CAA2D520030AC47386EF22BF76740FF54BB32C69E11787?1539856225"/>')
                       }
                }.bind(this));
   	
        },
0 - 9		Tadpole
10 - 29		Teen Frog
30 - 49		Street Frog
50 - 61		Bronze Frog
62 - 74		The Doctor Frog
75 - 87		MC Frog
88 - 99		Rock Frog
100 - 112	Silver Frog
113 - 121	Brainy Frog
122 - 136	Star Frog
137 - 149	Super Frog
150 - 161	Gold Frog
162 - 173	Glee Frog
174 - 186	Gold Frog
187 - 198	Olympic
199+		Top Frog

I have a whole load of images that I have put in the widgets Assets folder for each range above, please note that the above ranges are a guide.
We will end up adding more if statements to the code for each range and point them to the appropriate image file. currently, I am not 100% sure on how to adequately point to the graphics files within the widget which is why they point to the full URL.

Our achievements points are pulled in from SIMs, so we are using the 'getBehaviourTotals' api that the behaviour Summary widget uses which is part of the Parent Portal in Frog.

  • Thanks 1

Share this post


Link to post
Share on other sites
25 minutes ago, Phil Stiles said:

 

Hi @ADT

So this is still a work in progress.

main.css


[data-name="Widget.TopFrogPoints"].widget-content {
  background: none;
  text-align: center;
  width: 100%;
  margin: 0;
}
.edit [data-name="Widget.TopFrogPoints"].widget-content {
  border: 1px solid #ccc;
  border-radius: 6px;
}
[data-name="Widget.TopFrogPoints"].widget-content img {
  margin-bottom: 5px;
 -webkit-border-radius: 10px; 
  border-radius: 10px; 
}
[data-name="Widget.TopFrogPoints"].widget-content .view {
  width: 200px;  
  margin: 0 0 15px; 
  overflow: hidden; 
  padding:10px 10px 0px 10px; 
  -webkit-border-radius: 10px; 
  border-radius: 10px; 
  background: -moz-linear-gradient(top,  #4495D1 0%, #02428D 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #4495D1 0%,#02428D 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,#4495D1 0,#02428D 100%);
  border:1px solid #147375; 
  color:white; 
  text-shadow: 0px 1px 1px #4d4d4d;
}
[data-name="Widget.TopFrogPoints"].widget-content #TOPFROG {
    width: 50px; 
    height: 50px;
}

main.ejs


<!--set content zone view, size and style set in main.css -->
<div class="view">
    <!-- Set span TOPFROG this is where widget.js will display image assets, Size set in main.css-->
	<span id="TOPFROG"></span>
    <h4>Total House Points</h4> 
    <h3>
        <!-- Set Span HP, this is where the number of points will be displayed -->
        <span id="HP"></span>
    </h3>
</div>

widget.js


/**
         * Event fired by the Site Controller.
         *
         * @event 'widget.live'
         */
        'widget.live': function(el, ev, data) {
            this.element.html(
                this.view('main.ejs')
            );
            // Setup Variables    
    			var user;
    			// Use Frog's API to get the logged in student
    			user = FrogOS.getUser();
    			// Use Frog's API to Get Behaviour Totals    
    			Frog.Model.api('behaviour.getBehaviourTotals', { student_uuid: user.uuid }).done(function(getBehaviourTotals) {
            		// get positive behaviour totals for the year and add to variable hp
                    var hp = getBehaviourTotals.data.pos.year;
                    //Show total behaviour totals in span HP. see main.ejs
                    this.element.find('#HP').html(hp);
                    // If House points less than 10 show Frog Tadpole image asset
                       if (hp <10) {
                           this.element.find('#TOPFROG').html('<img src="https://vle.abbey.kent.sch.uk/app/file/resource/41CAA2EB20030F33930FAFBC7701300370C8617C47543FDB?1539849442"/>')
                       }
                    // If House points more than 9, but less than 20 show Frog Teen image asset
                    if ( hp > 9 && hp < 29) {
                           this.element.find('#TOPFROG').html('<img src="https://vle.abbey.kent.sch.uk/app/file/resource/41CAA2D520030AC47386EF22BF76740FF54BB32C69E11787?1539856225"/>')
                       }
                }.bind(this));
   	
        },

0 - 9		Tadpole
10 - 29		Teen Frog
30 - 49		Street Frog
50 - 61		Bronze Frog
62 - 74		The Doctor Frog
75 - 87		MC Frog
88 - 99		Rock Frog
100 - 112	Silver Frog
113 - 121	Brainy Frog
122 - 136	Star Frog
137 - 149	Super Frog
150 - 161	Gold Frog
162 - 173	Glee Frog
174 - 186	Gold Frog
187 - 198	Olympic
199+		Top Frog

I have a whole load of images that I have put in the widgets Assets folder for each range above, please note that the above ranges are a guide.
We will end up adding more if statements to the code for each range and point them to the appropriate image file. currently, I am not 100% sure on how to adequately point to the graphics files within the widget which is why they point to the full URL.

Our achievements points are pulled in from SIMs, so we are using the 'getBehaviourTotals' api that the behaviour Summary widget uses which is part of the Parent Portal in Frog.

We haven't got Parent yet......  but its a possibility!!  I don't know if you spotted my certificates post....  but this would be a great way to automate the system and that's what i was after!!  

I'll keep watching this post.... ;)

Share this post


Link to post
Share on other sites
9 hours ago, Phil Stiles said:

Many thanks, @adamw and @pconkie.

All is now working as expected below is the end result.

image.png.f731f044f8b4790f9e52bec7e0145a46.png

Out of curiosity what is the correct way to point to the image files that I have uploaded to the assets folder currently have the widget pointing to the full URL of the image?


<img src="https://vle.abbey.kent.sch.uk/app/file/resource/41CAA2D520030AC47386EF22BF76740FF54BB32C69E11787?1539856225"/>

kind regards

Phil

I think you can just use this relative path: /app/file/resource/B5FB28592003052DA888AF90FA18BF0B12B38E6C966EE2A3.png

Share this post


Link to post
Share on other sites
15 minutes ago, Stuart Green said:

This is brilliant - Is it or will it be available for anyone to use and modify?

Hi Stuart,

I don't know if Phil finished his widget, but by posting the code, it is possible to recreate it from here.   

@Phil Stiles - how did you get on in the end?  Is your widget available to share?

 

 

Share this post


Link to post
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.

Guest
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 Stuart Green
      We would like to create a widget for displaying achievement point totals/leaderboards in a similar format to PictoChart (Which we currently manually update via google sheets).
      The information is available in SIMS so it would save schools time and effort and be an excellent way for students to engage with Frog. 
      I have pasted a copy of the points page (with PiktoCharts) to help describe what we are after. They are also nicely animated! Does anyone have the skills to be able to attempt something in Frog Academy?

    • By Graham Quince
      Here's a new FrogCode widget:
      https://www.frogeducation.com/community/frogcode/frogcode-showcase/visitor-log
      We worked with George Bligh from Greenshaw on this widget.  When someone views a page with this widget on, it records their visit.  Anyone with Edit and Manage rights gets a button which displays a list of all visitors, their profile, their children (if a parent), how many times they have visited the site and the time and date of their last visit.

      (This widget uses the datastore - a little known about feature of Frog's API.)
    • By Graham Quince
      The brilliant @Simon Law has built a new widget which adds a site's menu to a page, to save us all from having to do this manually using text widgets.
      You can download this from the showcase page:
      https://www.frogeducation.com/community/tutorials/frogcode/frogcode-showcase
    • By K.Ermit
      Hi,
      I want to link an image (or file) to my widget, but I can't get the web address when I upload it.
    • By pconkie
      We have a new process for monitoring regularity and quality of home learning (all of which are now done via assignment manager).
      Happy to share this frog code app which allows Tutors, Heads of House/Year, SLT to lookup what has been assigned to a student and act accordingly.   I will ensure this app continues to work if frog change api's in the future as it is part of our internal systems.  
      I realise this functionality is available in the assignment monitor app, but we do not wish to share this app with staff as it would allow them to lookup staff as well as students!
      A quick screen shot...

      Paul
×
×
  • Create New...