Homework Widget

Sue Busher · February 7, 2020

Is it possible to have this widget on a page but some code also on the page which will mean that only Science homework will be shown? Has anyone else done this? I would like to contextuallise it, e.g. only show Science homework set on the Science subject site.

Graham Quince · February 10, 2020

Hi @Sue Busher

This code (I think is on a tutorial somewhere) gives you the ability to list all homeworks on a page:

<style>
    .row-template {
        display: none;
    }
.assignment-widget-header {
background-color: #231f20;
padding: 1em;
position: relative;
text-align: left;
}
.assignment-widget-header::after {
content: "";
width: 98%;
height: 60%;
position: absolute;
top: 3%;
left: 1%;
border-radius: 5px;
}
.assignment-widget-header h1 {
color: #fff;
font-size: 20px;
margin: 0;
}   
.no-homework {
padding: 1em;
text-align: center;
}
.assignment-list {
list-style: none;
padding: 0 1em;
margin:0 0 0 0;
}    
    

    
.assignment-list :hover{
background-color:#ededed;
}        
    
.assignment-list .assignment-link {
border-bottom: 1px solid #ddd;
padding: 10px 10px  10px 10px;
margin: 0.5em 0;
cursor: pointer;
}
    
.assignment-list .assignment-link p {
margin: 0;
}
.assignment-list .assignment-link .assign-icon {
width: 32px;
height: 32px;
display: block;
float: left;
margin-top: 2px;
background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAgACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDtfAvgzxT8eoW8W6j4l1meW+1Gb+0JYvEE9rFp0PmSYIhSRQkKJGQPU8euNH4N/DrQPFXxs8a6Hea54t8R+GdI8PrqVkLXxBqEcs7/AGmVCy7ZgzFkQKFJwTyBzXk/w/8AAvjDXtA05NG8W6nZQ6rPLYR2dtpsTxEtcOfJMh+8CVL4bsCegr0n4D/DPx1p/wC0B4w0WD4nz+GdU0vw7E15qaaXZzKY1upB5ZDAoFUgtuGDzg9K+TwdWUsY1zN6vvbytpY8LDzlLEWu3q+//DHRLqHwyYA/8Kn/AGgf+/8Aq/8A8l1p3Z0rwp4Hi+JXgKw+JHgjVNF8Q6fYTaf4zvb1o9SguJ4opEaC4lkDJtl4YYIZa7b7Vq3/AEeFpP8A4B6NXGfHDQ/E198KW1g/HiP4kaFa67pMVzp9pp1gImc30G0NLANylSytjPOOeDX1R7p4f8L/AI1eOfAPgxtL8P8Ah3WJrK6M6C5gltiu4zSDzYA0gZHwSmcZx26EdX+zh488QaD8aPEzQfCjxB4imuPDUVnc6PHPZiVY/tUu55PNlClWJZduScg5GOaZ4D+IWj/A2zufDXjXwu6eKtFvZprNru0nG2YSyeW5KqRLbkOJFwfvD8RqfAr45eGNM+OHjLxH4p8T3FjFrXhuO0/taGynVvtJuZWYIBEdrKrKRxjp1r5XB05Rxl5Rf2v5rLXz018jwsPFrEarv30/T7j1UabonT/hiuT/AMAtC/8Aj1ct8ZPEFxpfwnfQdN/Z+1L4X6Pe69pM9zfxjTYrZZFvoMM6W8pYs21UB2nqM4FKPEnwz/6Oo+Kf/fw//INTa94h8P8AjjwHB8OPA/j3xb8WfEWteIdNu/P12GR/7Ot4LiKWV3l8iNUiCxHrklnGK+qPdP/Z) no-repeat;
}
    
.assignment-list .assignment-link .assign-details {
padding: 0 1em;
float: left;
}
    
    .widget-header {
        width: 100%;
        height:50px;
        line-height:50px;
        vertical-align:top;
        padding-left: 20px;
        box-sizing: border-box;
        background-color: #0497da;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border: 1px solid #cccccc;
        border-bottom-width: 0;
        color: #ffffff;
        font-size:12pt;
        
    background: #0497da; /* Old browsers */
    background: -moz-linear-gradient(top,  #0497da 0%, #0064cd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #0497da 0%,#0064cd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #0497da 0%,#0064cd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0497da', endColorstr='#0064cd',GradientType=0 ); /* IE6-9 */

        
    }
    .widget-body {
        background-color: white;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border: 1px solid #cccccc;
        border-top-width: 0;
    }
</style>
<div class="widget-header">
   My most recent homeworks:
</div>
<div class="widget-body">
    <p class="no-homework">You've not been set any homework yet</p>
    <ul class="assignment-list" style="display: none;">
        
    </ul>
</div>

<script>

    var getHTMLElem = arguments[0];
    
    var assignments = FrogOS.fdp({
        url: 'assignment/getAssigned',
        data: { status: 'open', limit: 5, order: 'start desc' }
    });

    assignments.done(function(data) {
       var assignments = data.response.assignments,
    assignment;

for (var uuid in assignments) {
	if (assignments.hasOwnProperty(uuid)) {
		assignment = assignments[uuid].assignment;
      
                
                getHTMLElem.find('.assignment-list').show();
                getHTMLElem.find('.no-homework').hide();
            
                var assignSubject = '<p><strong>' + assignment.subject.name + '</strong></p>';
                var assignTitle = '<p>' + assignment.name + '</p>';
                var assignEnd = '<p style="color: red;"><strong>Due: ' + moment(assignment.end, 'X').format('Do MMM YYYY') + '</strong></p>';
                var assignLink = assignment.link;
            
                var liElem = '<li class="assignment-link clearfix" data-assignment-link="' + assignLink + '"><div class="assign-icon"></div><div class="assign-details">' + assignSubject + '' + assignTitle + '' + assignEnd + '</div></li>';
            
                getHTMLElem.find('.assignment-list').append(liElem);
                
            }
        }
    });
    
    $(getHTMLElem).on('click', '.assignment-link', function(el){
        $(this).trigger('os.app.siteviewer', {
            data: { site: el.currentTarget.dataset.assignmentLink }
        });
    });
    </script>

It does bring back the Subject ( variable = assignSubject ) so it would be possible to add an IF statement around the append line, something like:

if (assignSubject == "English") {
    getHTMLElem.find('.assignment-list').append(liElem);
}

gbligh · September 13, 2021

Students really like it however they have notices that assignments appear before the ‘available from’ date. So, if staff set any assignments to appear on a certain day they will appear in list before that day.

Is there a way to change that?

Edited September 13, 2021 by gbligh

Graham Quince · September 13, 2021

Hi @gbligh,

Looks like we need to add an IF statement to check for only assignments with start dates less than the current dates. Try this:

<style>
    .row-template {
        display: none;
    }
.assignment-widget-header {
background-color: #231f20;
padding: 1em;
position: relative;
text-align: left;
}
.assignment-widget-header::after {
content: "";
width: 98%;
height: 60%;
position: absolute;
top: 3%;
left: 1%;
border-radius: 5px;
}
.assignment-widget-header h1 {
color: #fff;
font-size: 20px;
margin: 0;
}   
.no-homework {
padding: 1em;
text-align: center;
}
.assignment-list {
list-style: none;
padding: 0 1em;
margin:0 0 0 0;
}    
    

    
.assignment-list :hover{
background-color:#ededed;
}        
    
.assignment-list .assignment-link {
border-bottom: 1px solid #ddd;
padding: 10px 10px  10px 10px;
margin: 0.5em 0;
cursor: pointer;
}
    
.assignment-list .assignment-link p {
margin: 0;
}
.assignment-list .assignment-link .assign-icon {
width: 32px;
height: 32px;
display: block;
float: left;
margin-top: 2px;
background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAgACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDtfAvgzxT8eoW8W6j4l1meW+1Gb+0JYvEE9rFp0PmSYIhSRQkKJGQPU8euNH4N/DrQPFXxs8a6Hea54t8R+GdI8PrqVkLXxBqEcs7/AGmVCy7ZgzFkQKFJwTyBzXk/w/8AAvjDXtA05NG8W6nZQ6rPLYR2dtpsTxEtcOfJMh+8CVL4bsCegr0n4D/DPx1p/wC0B4w0WD4nz+GdU0vw7E15qaaXZzKY1upB5ZDAoFUgtuGDzg9K+TwdWUsY1zN6vvbytpY8LDzlLEWu3q+//DHRLqHwyYA/8Kn/AGgf+/8Aq/8A8l1p3Z0rwp4Hi+JXgKw+JHgjVNF8Q6fYTaf4zvb1o9SguJ4opEaC4lkDJtl4YYIZa7b7Vq3/AEeFpP8A4B6NXGfHDQ/E198KW1g/HiP4kaFa67pMVzp9pp1gImc30G0NLANylSytjPOOeDX1R7p4f8L/AI1eOfAPgxtL8P8Ah3WJrK6M6C5gltiu4zSDzYA0gZHwSmcZx26EdX+zh488QaD8aPEzQfCjxB4imuPDUVnc6PHPZiVY/tUu55PNlClWJZduScg5GOaZ4D+IWj/A2zufDXjXwu6eKtFvZprNru0nG2YSyeW5KqRLbkOJFwfvD8RqfAr45eGNM+OHjLxH4p8T3FjFrXhuO0/taGynVvtJuZWYIBEdrKrKRxjp1r5XB05Rxl5Rf2v5rLXz018jwsPFrEarv30/T7j1UabonT/hiuT/AMAtC/8Aj1ct8ZPEFxpfwnfQdN/Z+1L4X6Pe69pM9zfxjTYrZZFvoMM6W8pYs21UB2nqM4FKPEnwz/6Oo+Kf/fw//INTa94h8P8AjjwHB8OPA/j3xb8WfEWteIdNu/P12GR/7Ot4LiKWV3l8iNUiCxHrklnGK+qPdP/Z) no-repeat;
}
    
.assignment-list .assignment-link .assign-details {
padding: 0 1em;
float: left;
}
    
    .widget-header {
        width: 100%;
        height:50px;
        line-height:50px;
        vertical-align:top;
        padding-left: 20px;
        box-sizing: border-box;
        background-color: #0497da;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border: 1px solid #cccccc;
        border-bottom-width: 0;
        color: #ffffff;
        font-size:12pt;
        
    background: #0497da; /* Old browsers */
    background: -moz-linear-gradient(top,  #0497da 0%, #0064cd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #0497da 0%,#0064cd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #0497da 0%,#0064cd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0497da', endColorstr='#0064cd',GradientType=0 ); /* IE6-9 */

        
    }
    .widget-body {
        background-color: white;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border: 1px solid #cccccc;
        border-top-width: 0;
    }
</style>
<div class="widget-header">
   This week's homework:
</div>
<div class="widget-body">
    <p class="no-homework">You've not been set any homework yet</p>
    <ul class="assignment-list" style="display: none;">
        
    </ul>
</div>

<script>

    var getHTMLElem = arguments[0];
    
    var assignments = FrogOS.fdp({
        url: 'assignment/getAssigned',
        data: { status: 'open', limit: 15, order: 'start desc' }
    });

    assignments.done(function(data) {
       var assignments = data.response.assignments,
           assignment;

    for (var uuid in assignments) {
	    if (assignments.hasOwnProperty(uuid)) {
		    assignment = assignments[uuid].assignment;
      
            var currentDate = moment()/1000; /// Convert from miliseconds to seconds
            getHTMLElem.find('.assignment-list').show();
            getHTMLElem.find('.no-homework').hide();
            
            if (assignment.start < currentDate){
                var assignSubject = '<p><strong>' + assignment.subject.name + '</strong></p>';
                var assignTitle = '<p>' + assignment.name + '</p>';
                var assignEnd = '<p style="color: red;"><strong>Due: ' + moment(assignment.end, 'X').format('Do MMM YYYY') + '</strong></p>';
                var assignLink = assignment.link;
                var liElem = '<li class="assignment-link clearfix" data-assignment-link="' + assignLink + '"><div class="assign-icon"></div><div class="assign-details">' + assignSubject + '' + assignTitle + '' + assignEnd + '</div></li>';
            
                getHTMLElem.find('.assignment-list').append(liElem);
            }
        }
    }
});
    
    $(getHTMLElem).on('click', '.assignment-link', function(el){
        $(this).trigger('os.app.siteviewer', {
            data: { site: el.currentTarget.dataset.assignmentLink }
        });
    });
    </script>

Sign In

Homework Widget

Recommended Posts

Sue Busher

Graham Quince

gbligh

Graham Quince

Create an account or sign in to comment

Create an account

Sign in

Forums