Get Positive Behaviour Totals for logged in student

Phil Stiles · October 10, 2018

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

Graham Quince · October 10, 2018

@Simon Law @Adam ...

adamw · October 10, 2018

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

pconkie · October 10, 2018

@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

adamw · October 11, 2018

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

Phil Stiles · October 16, 2018

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.

Any advice or recommendations appreciated.

adamw · October 16, 2018

@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!

pconkie · October 16, 2018

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

Phil Stiles · October 18, 2018

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

ADT · October 18, 2018

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

ADT · October 18, 2018

Can you post the full code you are using??

Phil Stiles · October 18, 2018

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.

ADT · October 18, 2018

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....

pconkie · October 18, 2018

9 hours ago, Phil Stiles said:
Many thanks, @adamw and @pconkie.

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

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

Stuart Green · February 26, 2019

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

Graham Quince · February 26, 2019

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?

Sign In

Get Positive Behaviour Totals for logged in student

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Similar Content