Google Email Content filtering

May 20, 2015

At Cramlington, we use Gmail for our student mail.  It’s a good system that ties in with the devices we provide to our students through 1:1 schemes (Android tablets and Chromebooks).

Chuck Norris Gmail

Modding Gmail

There can be some issues using a third-party external email service.  For instance, we made the decision to prevent students having external email access.  They can’t email anyone outside the school.  If you are an administrator for your school’s Gmail system, you can control this access through the Routing section in the Advanced settings of the Admin Console.

Outbound Routing Settings for Gmail

Outbound Routing Settings for Gmail

Stop swearing!

Swearing meme

The other side of student email is teaching responsible use.  If we don’t prepare students for interacting appropriately with others online, then we have failed as educators.

Students are like everyone else.  I’ve used swear words in personal email, but I don’t think I’ve ever sent an email which included profanity from a professional account.  It’s just not professional.   I don’t think kids are unique in not understanding the difference between personal and professional, but at least we can help teach kids the differences.

Gmail has content filtering possible.  If you go into the Advanced settings of the Gmail Admin Console, there is a section marked Objectionable Content.

Objectionable content settings

Objectionable content settings

I’ve no idea where it came from originally, but here’s a spreadsheet of inappropriate words, alternate spellings etc which can be uploaded to the Objectionable Content:

Banned_words.xls
(Don’t judge me on the contents)

Any email that comes through containing one of these words gets re-routed to my email inbox.  One additional aspect that was a bonus is this also works if a student shares a document or comments on a document which also contains inappropriate word.

Side effects

I’ve already touched on students using their emails for (very) personal communication.  Spelling mistakes and abbreviations have also caused emails to be blocked.  I generally scan the email to see what the problem word was.  I’ve removed a few words from the list (e.g. job) which is only inappropriate in certain context.

I do wish our teachers would stop shortening ‘Assessment‘ documents to ‘Ass‘!

There have been a few instances of party invitations being blocked because kids insist on using text speak:

Will you cum to my party?

For some reason, we also get quite a few copied-and-pasted rap lyrics emailed round.

The content filter has led to a few detentions and highlighted some bullying issues.  In the few instances parents have been called in to discuss their child’s email language.  Seeing the email printed out has never failed to produce an appropriately annoyed response. 🙂

I don’t like having this access.  On one occasion an email was re-routed due to a mis-spelling.  Scanning the email, I saw it was a student talking about how upset they were as their pet had died.   I was really tempted to let her tutor know, so they could be supportive.  In the end, I didn’t.  It was an invasion of privacy and while accidental, there was nothing I could do which would make that invasion appropriate.

Advertisements

Creating a ‘FrogLearn Widget’

April 24, 2015

First things first.  You can’t actually create a FrogLearn widget and have it appear in the sidebar, but this hack lets you come close in terms of functionality.

meme_morpheus

What it is

In a nutshell, I built a webpage which allows users to set up a date countdown.  Pressing the submit button generates a URL which can be pasted into a FrogLearn Embed a Website widget.

Frog's Embed a Website widget

Embed a Website

What you need

In this example, I created a webpage with jQuery embed and code to run a date countdown.  It’ s not my countdown code.  I got it from trulycode.com.   I’ve just adapted it into a form so that anyone can quickly set up an event countdown.

You can download the web page here

When you first open the page, you’ll see this form, with instructions:

Form to add a date

Filling in the form, adding  title, date and time and clicking Create a countdown sends you to the same page (with  few variables added).  The page now looks like this:

Countdown display

And that’s it!

If you copy the address of the webpage and paste that address into the Embed a Website widget, you’re able to create a customised, easy to edit “widget”.

Summary

Hopefully you can see the potential for this kind of hack.   It’s not limited to just this one resource.   By creating a simple form which generates a URL, we can start to add some Frog3 type customisation into FrogLearn.

Notes:

I’ve adapted this quite heavily so that the page will run locally.  All the CSS is on the page and it points to Google’s hosted jQuery.  This means it needs to be connected to the internet.  If you have your own server, then I’d suggest installing jQuery and repointing the links.

Feel free to adapt the code, although if you’re going to put it on your own blog, then a link back to here would be nice.


Converting videos so they can be edited

April 18, 2014

At Cramlington, we don’t currently have a third-party video service.

Not that sort of video service!

Not that sort of video service!

Instead, having an entirely Windows server environment, we’ve used Windows Media Encoder and WMV files to stream all our videos.

Together with Graeme Porter (since moved to be Walbottle Campus’ VLE Coordinator), I put together our own video database system (CramTube – yeah, our naming’s not got better either).  We also methodically went through all of the encoding settings in Adobe Premiere to determine best compression – size ratio.  Using WMV we achieve around 4 Mbs per minute.

  • Bit rate encoding: CBR, 1 pass
  • Maximum bit rate: 550 kbps
  • Width: 640, height: 480

At this setting, you see a little artefacting (it’s not yet a word, but I’m holding out hope), but the file size has to double before the quality noticeably improves.  And so far, we’ve only rolled out Android devices to students which can play WMVs fine.

 

The problem

Of course, there’s a problem.  In this case, it’s our students, who use their Android tablets and phones (only in 6th form supposedly) to record video.

I'm currently pushing for month long detentions for filming the wrong way.

I’m currently pushing for month-long detentions for filming the wrong way.

Shockingly, they also to want to be able to edit it.  Trouble is, there’s no app in existence (I’ve looked) that allows the user to record video as WMV.  And if the student wishes to edit the video, generally it involves a trip to the IT support office with a memory stick.

Our Solution

Please note, that this bit is entitled Our Solution.  I’m sure there are many other ways to achieve this, but this is our solution using products we had to hand.  The solution required:

  1. Some way of students uploading video (large files).
  2. Have it convert automatically.
  3. Be able to download the new file.

1 – PL Upload
To solve the first point, a Google search (sorry Bing – I never even considered you) discovered PL Upload.  This system is a lovely bit of code which allows large files to be automatically uploaded by users.  This gets round the problem of standard file upload forms timing out.  The documentation is a little off-putting, but the example file provided works just fine.  From there, it’s easy enough to adapt to suit your own design.

2 – Adobe Media Encoder
The next part involves converting the video from whatever format into the editable WMV.  We’re lucky enough to have Adobe CC for our department.  It’s meant we have the latest versions of all the Adobe products, though I think AME has had watch folders for some time.

Hang on….sorry, got ahead of myself.  In AME, you can set up the program to “watch” for new files on a network drive.  So every time a user uploads a video file using PL Upload, it drops into one of these ‘watch folders’.  AME, running on a spare PC detects the new file, converts it and saves it into another folder.

3 – Auto menu – PHP
On upload, we used a bit of our own code to rename the video file with the user’s username, time and date.  Using a variation on the auto menu code I shared last time on this blog, the user sees a list of all the videos containing their username.

And that’s it.   Obviously AME can be set to convert to formats other than WMV, but seeing as our students use Adobe Premiere Pro CS3 (site licence years ago) and Windows Movie Maker (free), we find it’s the easiest format.

So far, only our sixth form students have used the uploader, but our Year 7 students are using a stop motion app which only saves in MOV or MP4 formats.  PL Upload being a web-based tool should allow them to upload and convert.


Making a link that will save an appointment in MS Outlook’s calendar

May 15, 2013

OK, so the link is an iCalendar file, but until I started looking for, I had no idea what it was called.

The Problem

In a nut shell, for a while now I’ve known about the existence of Google’s Save Event.  Which is great if you have a Google account and you’re signed in and you don’t have separate work and personal accounts.

At school, we use Outlook for EVERYTHING.   Quite possibly a bit too much.   I do hear: “I haven’t had a chance to read your email” as an excuse quite a bit.

What I wanted was the ability to generate a link, which when clicked on would add an appointment to my calendar as opposed to manually going to calendar, creating a new event, setting the time and date correctly, inviting others to the meeting, adding a room…  I’m boring myself.

The Solution

I eventually found a solution on Stackoverflow’s fourm

<?php

$ical = “BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//hacksw/handcal//NONSGML v1.0//EN
BEGIN:VEVENT
UID:” . md5(uniqid(mt_rand(), true)) . “@yourhost.test
DTSTAMP:” . gmdate(‘Ymd’).’T’. gmdate(‘His’) . “Z
DTSTART:20130715T100000Z
DTEND:20130715T110000Z
SUMMARY:Bastille Day Party
END:VEVENT
END:VCALENDAR”;

//set correct content-type-header
header(‘Content-type: text/calendar; charset=utf-8’);
header(‘Content-Disposition: inline; filename=calendar.ics’);
echo $ical;
exit;

?>

Which solves the problem quite nicely.  You need to put this in a PHP page, so you need a server which lets run PHP*.  This page also auto-closes once completed, so you need to link to this page from another.  When you run it the page closes itself.

The example above creates a .ics file which when run, opens up an appointment in MS Outlook for 15th July 2013 from 10 am until 11am and names the event Bastille Day party.  Wow, that will be some party!

I’ve tinkered a bit with the original, to make it easier to adapt.  My Comments are in green, things you can set are in red:

<?php

// If you point to this page from another page, you can add variables to the link: eg:

// calendar.php?startdate=201307015&apptTime=100000&location=My Office

// Start date format needs to be YYYYMMDD

$startdate=$_GET[‘startdate’];

// Appointment time format needs to be HHMMSS

$apptTime=$_GET[‘apptTime’];

// Location can be pretty much anything

$location=$_GET[‘location’];

$ical = “BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//hacksw/handcal//NONSGML v1.0//EN
BEGIN:VEVENT
UID:” . md5(uniqid(mt_rand(), true)) . “@yourhost.test
DTSTAMP:” . gmdate(‘Ymd’).’T’. gmdate(‘His’) . “Z
DTSTART:”.$startdate.”T”.$apptTime.”Z
DTEND:”.$startdate.”T”.$endTime.”Z
LOCATION:$location
SUMMARY;LANGUAGE=en-gb:$details
END:VEVENT
END:VCALENDAR”;
//set correct content-type-header
header(‘Content-type: text/calendar; charset=utf-8’);
header(‘Content-Disposition: inline; filename=IrisAppt.ics’);
echo $ical;
exit;

?>

You can also add ATTENDEES so that it can auto-generate a meeting.  This is a little trickier to work out.  In the end, I created an iCal file from Outlook and opened it in NotePad++.  Each attendee needs their own line and goes just below the LOCATION line:

ATTENDEE;CN=SomeBody;RSVP=TRUE:mailto:SomeBody@youremail.co.uk

And that’s it.   All you have to do is link to a page containing this code and it should do the rest.

Bonus for Iris Connect users/admins

One of my main reasons for wanting to make an automated appointment system is because I, along with two colleagues administrate Iris Connect in the school.  We need to know when the observations are happening and where.  The easiest way for us to do this if I get everyone to invite me to observe them.  I then put the observation in my diary, invite the other two in case I’m not in the office.  When I get the reminder I set the camera up and set the recording going.  It works really well.  But I get fed up making the appointments.

The beauty of the Iris Connect system is that it sends out an automated email.  It’s always the same format.  So I built a form which means I can copy and paste the text of the email, click submit and up pops an appointment.   I had a slow morning. 🙂

If you would like to make use of this little bonus, you can find the files here

I’ve spoken to the guys at Iris Connect about this already and apparently this level of functionality is in their roadmap.  But why wait.


* I’m going to do another post very soon# which provides a solution for those of you who don’t have access to a server.

# I promise


Google Forms – passing user details from a VLE

November 27, 2012

The tutorials for how to do this already exist on Google Docs, but whenever I see a survey posted on our VLE, this extra is never included.

Getting started

I’m assuming if you’re reading this you already know how to set up a Google form.  I’m assuming that not because I want to make anyone (including me) an ass, let alone recite a cliché.  No I’m assuming, gentle reader, that you know how to make a form in Google for two reasons:

  1. You want more functionality from your forms
  2. It’s really easy

    Create a form in Google Docs

    This is the current Create button in Google. By the time this post is published I fully expect Google to have changed the design completely

Quick primer

Just in case, I’m going too fast:

  • log into Google Docs
  • click on the Create button
  • click Form

Once your Form is opened you can set about adding questions in all sort of styles, from text entry and paragraphs to multi-choice, scales etc… But let’s be honest, you know all this.

Get to the “fun” bit

Alright, I went as fast as I could.  So, assuming (there I go again) you’re using a similar set up to Cramlington, where surveys are posted as links inside notices and do not require our students to be logged into Google Docs, you will have no idea who the student is who is completing your survey.Easiest solution is to include a username field.   Generally our students are honest and will fill this out, but that’s assuming they spell correctly and include the tutor code part of their username.   It would be so much simpler to just pass those details from our VLE.

Fortunately, we use the Frog VLE which exposes the user’s username in a simple Frog tag: [user_username]

This username can be added to the Google Form address in the following manner:

https://docs.google.com/spreadsheet/viewform?formkey=lots of letters&entry_0=[user_username]&

What does that do?

The actual address of the form is:

https://docs.google.com/spreadsheet/viewform?formkey=lots of letters

There’s a link to the form at the bottom of the edit page.  The rest comprises of:

& tells your browser that the formkey variable has ended.

entry_0 is a new variable and corresponds to the first field in the form.  If you put entry_1 you could set the second variable in the list and so on.

[user_username] is our Frog tag

You can see the example for yourself here:

And that’s it.  Simple.

Now all I have to do is make our 100+ teachers read my blog.


Creating custom fields in Frog forms

October 7, 2012

Frog’s forms are great.  They might not be as simple to use as their Google counterparts, but the results are always user tagged for easy reference and they come with an export button.

Export a database as a CSV

Google can suck it

Alright, maybe I’m over playing their usefulness, but while it is possible to get usernames to automatically pass into Google, it’s a lot easier in Frog.

The only real issue with Frog forms though is that you’re limited to the bricks in the toolkit and the formatting they offer.

The Form Bricks

It’s like they want you to fail

You get everything you need to make a survey or question set, but sometimes you want a different layout for a question than the ones available.

Example

Recently, I wanted to have a survey where users could rate along a line.  You’ve all seen the sort of thing, 1 – 6 strongly agree to strongly disagree.  This would normally be achieved using a radio set:

A Frog Radio Set brick

You can recreate the functionality of this question type, but not the look, as the options can only appear vertically.  That’s when I remembered a trick I employed with Frog forms a few years ago before the hidden field brick was available.

The Trick

Frog bricks are essentially packets of html pre-coded that you can drop in and a page will build.   I know this because if you view the source of any Frog page, you can find the html behind each brick.

Code example

The relevant section of the source code for the radio set example. CTRL + F will be your best friend here.

If you view the full size version of the picture, you’ll see the HTML code which creates the radio set.  This is the relevant bit:

<table border=0><TR><TD align=right valign=top>Radio Set Example</TD><TD width=250>&nbsp; 

<input type=radio name=’frg_Radio_Set_Example’   value=’1′>&nbsp; option 1<BR>&nbsp; 

<input type=radio name=’frg_Radio_Set_Example’   value=’2′>&nbsp; option 2<BR>&nbsp; 

<input type=radio name=’frg_Radio_Set_Example’   value=’3′>&nbsp; option 3<BR></TD></TR></TABLE>

Those of you familiar with HTML will recognise this is standard radio but code, although, note the name of the radio options:

name=’frg_Radio_Set_Example’ 

Frog’s bricks place frg_ in front of any option name you create.  All of this is leading up to the actual trick, which is that you can use an HTML brick inside a Frog form as long as your field name starts with frg_

The catch

Actually, no you can’t. If you drop in a form field inside an HTML brick with frg_ on the front and test the form, your field isn’t passed into the results.  Which is strange because I swear it used to be.

The Fix

Studying the source code again, I did spot another line of code, just underneath the end of table tag:

<input type=hidden name=form_details[] value=’frg_Radio_Set_Example’>

The field name frg_Radio_Set_Example matches the radio set name, so I tried adding it to the HTML brick and tested the form.   Success!  I’ve no idea what it does, but clearly it’s important (at least for the radio set brick).

So my final code for the HTML brick looks like:

<table border=”0″ width=”500″>
<tr>
<td valign=”bottom” rowspan=”2″>
Strongly agree
</td>
<td align=”center”>1</td>
<td align=”center”>2</td>
<td align=”center”>3</td>
<td align=”center”>4</td>
<td align=”center”>5</td>
<td align=”center”>6</td>
<td valign=”bottom” align=”right” rowspan=”2″>
Strongly disagree
</td>
</tr>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’1′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’2′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’3′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’4′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’5′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’6′>
</td>
</tr>
</table>
<input type=hidden name=form_details[] value=’frg_rating_example’>

And what it looks like:

Radio buttons in Frog created with an HTML brick

And once again Google can suck it

I like to imagine Larry Page reading my blog just asking “why?”.

Hey we can all dream.

Of course in reality, if Larry Page even did read this blog, I’ve probably blown any chance of ever working for Google all for a really, really weak joke.


Tutorial: Creating a timing control in Frog’s FDP

June 18, 2012

A while ago, I built a widget in Frog’s FDP which sets the content of a page based on the time of day.  This is really handy for us, as it allows access to Flash games and social networking outside of lessons, but switches them off during lessons.

I’ve spent some time trying to work out the best way to turn this into a widget for Frog, but the complexity needed to make it general and the instructions that would have to accompany it made it all seem like it would never really work.  So instead, ahead of Frog’s annual interNational Platform’s Conference, I thought I’d post this tutorial here.  I’ll be speaking at the conference, as well and I’m fairly certain there’ll be workshop videos posted shortly afterwards.

I’m quite pleased with the widget.  If only because it originally began life in PHP and I had to learn the FDP code in order to remake it.

The Code

First off, we need to set up the page.  Easiest way to do this is to get the skeleton code from Frog’s FDP generator

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> xmlns=”http://www.w3.org/1999/xhtml”      xmlns:frog=”http://fdp.frogtrade.com/ns/“> <head>  <title>Time of day</title>  <meta name=”frogLib” content=”1.0″ />  <frog:roles>  

 </frog:roles> <script>

//<![CDATA[

…. Our code goes here …..

//]]>

</script>

</head> <body> 

</body></html>

Next up, we need to create a function that’s going to be run when the page loads:

var GetTime = function(data) {

};

And run it

GetTime();

Now, inside the function we need to set up some variables:

var currentTime = new Date();

var dayNames = new Array(“Sun”,”Mon”,”Tue”,”Wed”,”Thu”,”Fri”,”Sat”);

var day = dayNames[currentTime.getDay()];

currentTime uses the new Date() function built into JavaScript to become an all encompassing date object.  This means you can tag onto it code like getDay() and it will bring back a number corresponding to current day of the week, e.g. Sunday = 0, Monday = 1, Tuesday = 2 etc…  I’ll also use currentTime to get the minutes and hours:

var mins = currentTime.getMinutes();

var hours = currentTime.getHours();

hours = hours*100;

So, I can get the name of current day by putting that number into the array dayNames I created.  I could do all this with just numbers and miss out this step but I find it’s easier later on. The reason I’m getting the days of the week is that our school runs a two-week timetable and on Wednesday finishes at 2pm for staff development.  Also, it allows the fun stuff to be accessible on weekends at any time.

The time of the day is going to be treated as numbers, with the hours as hundreds and minutes as units, e.g. 9:10am becomes 910:

var tim = hours+minutes;

We run a four period day with lessons 75 minutes long, so I now need to tell the function what the start and end times are:

var p1start = 900;

var p1end = 1015;

var p2start = 1035;

var p2end = 1150;

var p3start = 1150;

var p3end = 1305;

var p4start = 1350;

var p4end = 1505;

And on Wednesday’s these times are different:

if (day == “Wed”) {

p1start = 900;

p1end = 1015;

p2start = 1035;

p2end = 1150;

p3start = 1235;

p3start = 1400;

p4start = 1401;

p4end = 1402;

}

This IF statement simply changes the variables if the variable day is set to Wed.

The final variable needed is one I’ve named naughty.  This should give you an insight into my sense of humour.

var naughty = 0;

if (day == “Sat” || day == “Sun”) {

} else {

   if (tim>p1start && tim

        naughty = 1;

   }

   if (tim>p2start && tim

        naughty = 1;

   }

   if (tim>p3start && tim

        naughty = 1;

   }

   if (tim>p4start && tim

        naughty = 1;

   }

}

So, we set naughty to 0, then we check to see if today is on a weekend, if it is, naughty remains at 0.  If not, we now check to see if the current time, tim is during one of the lessons.  If it is, naughty is set to 1;

if (naughty<1) {

document.write(“Use document.write to add your code“);

} else {

document.write(“<center><BR>You cannot use this widget during lessons<BR><BR></center>”);

}

If naughty is set to 1, then the page returns a message saying:

You cannot use this widget during lessons

If naughty is set to 0, you can use embed Flash files, or iframes or whatever you wish simply using document.write to fill in the code.

Looking through this code, you’ll probably see why it would be so hard to wrap it up as a generic timing widget, given the different number of periods each school uses.  Hopefully, you can see how you’d be able to adapt this to suit your needs.

You could (as I have done previously) build the entire page using multiple IF bricks entirely within Frog’s toolkit and I’m sure non-Frog users can see how easy it is to run the code as pure JavaScript instead of being inside the FDP wrapper.  I’ve gone further with this and used the FDP preferences to control what appears in the non-naughty section, so I only have one html page which can display different content, but that’s adding a whole extra level of complexity.  I’ll turn that into another tutorial.

Here’s the code in full:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”       “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

xmlns=”http://www.w3.org/1999/xhtml”   xmlns:widget=”http://www.netvibes.com/ns/“>

<head>

<title>Game Timer</title> 

<meta name=”frogLib” content=”1.0″ /> 

<script>  

//<![CDATA[

var GetTime= function(data){

var currentTime = new Date();

var dayNames = new Array(“Sun”,”Mon”,”Tue”,”Wed”,”Thu”,”Fri”,”Sat”);

var day = dayNames[currentTime.getDay()];

var mins = currentTime.getMinutes();

var hours = currentTime.getHours();

hours = hours*100;

var p1start = 900;

var p1end = 1015;

var p2start = 1035;

var p2end = 1150;

var p3start = 1150;

var p3end = 1305;

var p4start = 1350;

var p4end = 1505;

if (day == “Wed”) {

p1start = 900;

p1end = 1015;

p2start = 1035;

p2end = 1150;

p3start = 1235;

p3end = 1400;

p4start = 1401;

p4end = 1402;

}

var tim = hours+mins;

var naughty = 0;

if (day == “Sat” || day == “Sun”) {

} else {

if (tim>p1start && tim

naughty = 1;

}

if (tim>p2start && tim

naughty = 1;

}

if (tim>p3start && tim

naughty = 1;

} if (tim>p4start && tim

naughty = 1;

}

}

if (naughty<1) {

   document.write(“Use document.write to add your code“);

} else {

document.write(“<center><BR>You cannot use this widget during lessons<BR><BR></center>”);

 }

};

GetTime();    

//]]>  

</script>

</head>

<body>

 

</body> </html>