XP based grading - the first year is over

This school year ist just about to end and this is a good time for me to think about how my XP based grading system has evolved from its original idea and more importantly what my student's think about it.

Last things first: I asked my students to give me anonymous feedback about my grading system in comparison to the traditional system, ten of them did it and the results are quite interesting.

These are the results:
100% of them think its very fair

100% think it's easy to understand and to manage

30% think it's very important to have this system in other subjects
20% think it's somewhat important
40% think it would be nice to have
10% think it wouldn't be necessary but they wouldn't mind if this system would be used in other subjects

40% accessed the platform where they could track their XP more than 1 time a day
30% accessed the platform once a day
30% accessed the platform every couple days

70% find the XP based grading system very motivating
30% find it somewhat motivating

80% think the XP based grading system is clearer than traditional systems

90% say it's easier to study if they know exaclty how many XP they need to level up to the next better grade

90% say its very important to see their grades live on a website

And the (for me) most important question and the main reason why I did this whole XP based grading stuff:

I'm happy to say that all my students passed this year and I'm glad I can accompany them to their graduation next year.

I feel that the XP based grading system has helped some of the weaker students because they can really focus on a topic and they know what they have to do to pass. They can put the information I give them in a better context and always know where they stand.

XP BASED GRADING EXPERIMENT -> SUCCEEDED

So what's next?

I am currently working on an improved XP based grading platform (website) that makes it easier to use (for teachers) since many of my teacher colleagues said they would be interested in testing this system in their subject but find the website to hard to understand.

I am pretty sure I'll have the website finished by the start of the next school year (in September) and I hope I can motivate other teachers to use this sytem and help students to put everything they do into context.

[PS]

Also I just got 48 Steam accounts from Valve as part of their teach with portals initiative. I am very excited to use Portal 2 with my students!

HTML5 heat spreading simulation

I was reading an algorithm book the other day and found a rather interesting section about simulations.

I really like simulations and I think it's awesome that computers can calculate and display something from the real world.

I came across an algorithm called the "Gauss-Seidel iteration" which can be used to calculate heat spreading in 1D (stick) or 2D (hotplate).

I first implemented it in Java and was very happy with the performance so I decided to recode it in HTML5

this is the result-> http://chr1s.at/heat/

If your browser can't handle it, here are some screenshots:

• Drawing an apple with heat and coldness
• Also drawing stuff
• Ascii render

When you click and drag the mouse somewhere you create a heat spot (rendered red). This is done by adding another grid behind the rendered grid which is used just to store the heat.

The ASCII render mode just replaces tile colors with the heat values of the field. Each number represents the heat of its tile.

The algorithm then recalculates the whole field and sets the color of each tile to the corresponding heat value.

This is the whole algorithm for calculating the tile values, it goes through every cell and performs its magic on it :D

for(var i=1;i<canvas.width/cellsize;i++)
        for(var j=1;j<canvas.height/cellsize;j++)
            field[i][j] = (0.25 * (field[i-1][j]+field[i+1][j]+field[i][j-1]+field[i][j+1]) + heat[i][j]);

If you press "C" and drag the mouse pointer around you cool off the area around the mouse pointer. You can make a "battle" between hot and cold spots. It really looks cool and the algorithm itself is just 3 lines of code.

Enjoy!

Let's eliminate analogue bulletin boards!

A few weeks ago I stepped over this article from Lifehacker where they explained how to make a digital picture frame from an old Laptop.

Picture from lifehacker.com

I have a few old laptops lying under my bed, waiting for better times and I thought I'd give it a try.

While I was wiping the dust of an old ThinkPad I thought about what to put on the device when I have it hanging on the wall.

I thought it would be best if I just display my Google Calendar on it and hang it near the door so I can have a look what I have planned today before I leave without having to boot up my computer.

"naked" ThinkPad

A couple of dozen screws later I was booting Debian from my first "victim"
and it was working like charm.

"naked" ThinkPad folded to a tablet-like thing

So I had a working digital picture frame that didn't cost me anything and I thought this would be perfect for the school I work for.

We were looking quite a while for information screens we can hang in school to inform students of certain things or just display random pictures of previous activities. The problem is that the 40'' screens needed are very expensive and also there has to be some wiring done and it needs to be controlled by a computer somehow.

These modified laptops were perfect for that. We could hang as many as we wish, we would reuse old hardware that would otherwise be junked and it wouldn't cost us much (or anything depending on how many laptops we can get).


The idea was good but I still needed to put something on those screens and it should be updateable from a central computer. So I wrote a Webservice with HTML5 and PHP.

This is what will be displayed on an Infoscreen (the design is oriented on Microsofts Metro):

"information screen" of a School

The tiles are dynamic. The empty ones change color from time to time and and they check every 15-30 seconds if there is new information available and if it is, an empty tile displays the new information.

If there is no empty tile one of the others fade out, change color and fade in with the new information.

The tile count is adaptive and changes depending on the resolution of the browser. But at least 3x3 tiles must be displayed at all times. If the browser window is smaller, scroll bars are displayed.

Same screen viewed in full-HD resolution

Some hard facts:

• Tiles change, the screen seems alive and not static
• Tiles can be edited, deleted and created with ease and all "information screens" change within seconds
• There are special (javascript powered) tiles that display the time and update quicker than the tile itself (count down)
• Tiles that have more information than they can show, scroll automatically
• Pictures can be displayed in tiles
• Tiles are placed and colored at random. If you hang two "information screens" next to each other they won't look the same
• The screen can also be embedded in web- and intranet sites
• Login can be required to gain access to the screen (google oAuth)

Use cases

• Information screens in corporations or schools
• Picture frame for your parents (you choose the pictures they see on their wall)
• Entertainment screens in visitor centres
• Infotainment screens in waiting rooms (hospitals or doctor's offices)
• (software only) To-do list on your PC (via active desktop even as desktop background)
• etc (end of thinking capacity)..

I hope I can hang the first screen this week in the school I work for and I'll keep you updated on this topic.

Here is a live version of the screen (needs a modern browser): live version

twitter feelings visualization with html5

I wanted to do some little project with html5 for some time now and finally I had the motivation to do it.

Using an almost unchanged version of my twitter feelings script as data source I visualize feelings from twitter and make them drop from to top to the bottom of the screen using html5 canvas elements.

If you look at the source code you'll notice that I generate an invisible div tag for every word, save the current location variables in the tag and delete it when it moves out of the canvas. This is a pretty dirty hack but saved me a lot of time figuring out how to parse multidimensional arrays in js. I am so php5 spoiled :)

The feelings posted on twitter are still pretty depressing. Also if the same words are dropping it's because no (new) feelings are posted right now.. just wait a little :)

Here it is (note that you need a modern, html5 compatible browser like Google Chrome or Firefox)
http://chr1s.at/feelings/feelingdrop.html 

[edit] I added use of the visibility API so that new feelings are not pulled if the window is not visible

ingame homework worked like a charm

Last week I gave my students their first ingame homework and today I logged on to check who actually did it.

I was pleased to see that every student had done it! Ingame-homework-experiment succeeded!

I asked them to build a simple AND gate where one input is always 1 and the second input is only 1 when the player steps on a pressure plate. The output of the gate should only be 1 if both inputs are active. This simple task was just to see if all students understand what they should do, where they should build and how to use the tools.

Today they got another ingame homework and again it's in Minecraft using redstone and logic gates. This time its a little more complex.


Here are some screenshot's of the student's houses with their homework:

I had to climb pretty high to see this student's homework

he has a very interesting house

Since the server is always on many students spend quite some of their spare time on the Server building impressing houses

This works very well and I hope that this approach is better than the usual teaching method and they learn quicker and remember it longer.

Ingame homework - I have never seen my students so motivated

In my earlier post I was describing my XP based grading system and how it can motivate students. Today I went a step further and gave my computer science class homework that's very different from normal homework: Its all ingame

But first things first...
A few weeks ago I was planning my lessons and I thought it would be important to teach my students the basic elements of computers: logic gates in circuits.

I was reading a few teacher resource articles but they all seemed very complex and I knew I had to think about a way to make this fun or my students will become bored pretty quickly with this material.

I immediately thought about Minecraft. Minecraft is a sandbox game where you can run around in a endlessly big and blocky world, chop trees, build houses, craft tools, gather resources and make logic gates. I knew that many of my students had already bought this 20€ game and I thought this would be a nice experiment.


They loved the idea of them learning things in a game so I set up a server with a huge flat area that was surrounded by high castle walls with a 20x20 "property" for every student and started teaching them some basics about Minecraft.

The castle with some of the students properties

Of course I couldn't force students to buy this game and I would have had a hard time explaining to the headmistress why the school should buy students a game, so I figured out a way how to teach them about logic gates with Minecraft without putting someone at a disadvantage when he or she doesn't want to buy the game.

To my surprise by the next lesson every student owned a copy of Minecraft because those who didn't own the game before thought the game and the Idea of teaching ingame was awesome.

So today I gave them the first ingame homework. They have a week to build a simple logic gate with pressure plates and AND-gates that performs a specific task.

Next week I'll go in the castle, visiting the property of every student and check if they did the homework and if so they will be rewarded with XP of course.

There will be at least 5 of these ingame homework's and probably more if the students like the concept.

If everyone in class does all logic-gate ingame-homework's I promised them to take them all on a boss-fight against the Ender Dragon in class or 30 XP for each student - they said they want the boss-fight

XP based grading - my students like it

[update] It's been a (school) year since I started this XP based grading system and if you want to see what the students think about it and how it turned out -> read this post[/update]

Ever since I started teaching computer science last year I thought much about motivation in class. The school system in Austria (and probably everywhere) is so extremely outdated and the gaps between the worlds the teachers and the students live in have never been greater.

Before I started teaching I worked on a grading system that was both fair and fun but still based on the traditional grading system so I could use it without special permits. So I developed an XP based grading system where students have to "level up" their grade by receiving XP (eXperience Points).

They get XP for every positive action but never lose them. It's important for the motivation that the XP they've earned cannot be taken from them. Negative actions like not doing homework are punished indirectly by not providing the XP they need to pass the year.

Here is how it works in the beginning of each year:

1. I give my students a list of about 8 topics that they can learn about this year
2. They can anonymously vote for 3-5 of them (depending on how many lessons/week we have)
3. I then set the maximum XP for each topic (I call them sections)
4. The grading starts -> Every student has to gain at least 51% on every section in order for him or her to pass the year

For this I have created a website where students can check their XP, compare their results with their classmates (anonymously - there is no high-score list) and get a nice and easy to understand overview of their performance in class.

This is my class overview (note that the website is very very beta and more of a proof-of-concept)

As you can see every section is graded separately and has its own graphical progress bar.

Students see exactly the same interface but with only their progress and not those of their classmates.

The "Info" link next to the name of the sections gives detailed information on the students performance and also a comparison chart

As for grading I made this UI where I can give any student of this class XP and I have to enter a reason so I can track it later and the student can see what he did over the year.

This method of grading is completely transparent and gives the students the ability to track their success in real time and if they think they're falling behind they can look for tutoring on the same platform since all students of the school I'm working for are registered on this site.

But this is only the beginning, I have so more ideas and things I want to do with this system.

If you are interested in this topic stay tuned, I'm currently writing scientific article on this topic and my system with student and teacher testimonials.

hackthissite.org ascii code picture challenge

I recently tried the second programming mission on hackthissite.org and I found it very fun to code it.

When you start the challenge you get a picture like this thing on the right:

There is a hidden message in this picture. The description of this challenge was:

The ascii code for a particular white pixel in the picture is equal to the offset from the last white pixel. The text contained in the image is the answer encoded in Morse.

So I wrote a little PHP script that scanned the picture line for line and counted the offsets, put the offset info into ASCII Code (which got me morse code) and then finally translated morse code back to normal letters.

This is what my script decrypted from the image above:

[+]String: -- --.- .--. ..--- ----- --... .- ...-- .... .-

[+]Translated from morse: mqpaha

So the password of this stage was "mqpaha"

Here is my code of course:

  
<?php
/*******************************************************
* Hackthissite programming challenge #2
* by Christian Haschek (2012)
* Blog: http://futurelopment.blogspot.com/
* 
* Translates a special kind of picture to morse
* and morse to ascii
*
* feel free to steal
*******************************************************/
$image='Download.png';
$im = imagecreatefrompng($image);

for($y=0;$y<imagesy($im);$y++)
{
 for($x=0;$x<imagesx($im);$x++)
 {
  if(imagecolorat ($im,$x,$y))
  {
   $str .= chr(($count-$lastfound));
   $lastfound = $count;
  }
  $count++;
 }
}

echo "[+]String: $str\n";
$arr = explode(' ',$str);

foreach($arr as $i)
{
 $morse .= translateMorse($i);
}

echo "[+]Translated from morse: $morse\n";

function translateMorse($code)
{
 switch($code)
 {
  case '.-': return 'a';
  case '-...': return 'b';
  case '-.-.': return 'c';
  case '-..': return 'd';
  case '.': return 'e';
  case '..-.': return 'f';
  case '--.': return 'g';
  case '....': return 'h';
  case '..': return 'i';
  case '.---': return 'j';
  case '-.-': return 'k';
  case '.-..': return 'l';
  case '--': return 'm';
  case '-.': return 'n';
  case '---': return 'o';
  case '.--.': return 'p';
  case '--.-': return 'q';
  case '.-.': return 'r';
  case '...': return 's';
  case '-': return 't';
  case '..-': return 'u';
  case '...-': return 'v';
  case '.--': return 'w';
  case '-..-': return 'x';
  case '-.--': return 'y';
  case '--..': return 'z';
  default: return false;
 }
}

PHP script that filters moods from twitter

Some time ago I saw a TED Talk where a programmer made a twitter-feeling project.

He wrote a program that scanned twitter for feelings and displayed them on his website with nice animations and a few other eye-candy things.

Personally I love data and graphing data so I wanted to try this myself.

I wrote a PHP script that uses the twitter-php library to search for the phrase "I feel" on twitter and processes the posts, strips everything but the posted feeling. In the end I want to get something like "I feel excited" but after watching the results I saw that there are many phrases that would be much to complex to filter like "I feel its time for a change"

So I made a "forbidden words" list that triggers the script not to scan any further if one of these words is detected after the "I feel" part.

In addition I made a function that makes the script look for one more word so that sentences like "I feel very good" will be found to be correct.

So here's the script. Feel free to copy, change and whatever

(note: this is intended for CLI execution. If you want to run it from a webserver with PHP just remove the while(1) loop so the search is done only once)

  
<?php
/*******************************************************
* Twitter feelings filter
* by Christian Haschek (2011/2012)
* Blog: http://futurelopment.blogspot.com/
* 
* for this to work you'll need the twitter-php class
* from http://code.google.com/p/twitter-php/
*******************************************************/

// load twitter class
include_once('twitter.class.php');

error_reporting(E_ALL ^ E_NOTICE);

//you'll have to enter your twitter api information here (as described in the twitter-php readme)
$consumerKey = "";
$consumerSecret = "";
$accessToken = "";
$accessTokenSecret = "";

$twitter = new Twitter($consumerKey, $consumerSecret, $accessToken, $accessTokenSecret);

//infinite loop that will check twitter every 5 seconds
while(1)
{
 $results = $twitter->search('i feel'); //the search string
 foreach ($results as $result)
 {
  if(!$read[$result->user->name][$result->created_at])
  {
   echo processPost($result);
   $read[$result->user->name][$result->created_at]=1; //so that no post will be printed twice
  }
 }
 sleep(5);
}

function processPost($result)
{
 $text = $result->text;
 $timestamp = $result->created_at;
 $user = $result->from_user;
 $realname = addslashes(utf8_encode($result->from_user_name));
 $lang = $result->iso_language_code;
 $postid = $result->id_str;
 $origtext = addslashes(utf8_encode($text));
 $image = $result->profile_image_url;
 
 //filter out special characters
 $text = preg_replace("/[^a-zA-Z0-9 ]/", "", $text);
 $text = strtolower($text);
 $arr = explode(' ',$text);
 $i = array_search('i',$arr);
 $feel = array_search('feel',$arr);
 
 if(($i + 1) == $feel && !checkForbiddenWord($arr[$feel+1]) && !is_int($arr[$feel+1]))
 {
  $word = $arr[($feel+1)];
  $plus = 1;
  
  //recursively checks if the next word is in the "next word too" list
  while(checkNextToo($arr[($feel+$plus)]) && !checkForbiddenWord($arr[($feel+$plus)]) && !is_int($arr[$feel+$plus]))
  {
   $plus++;
   $word .= ' '.$arr[($feel+$plus)];
  }
 }
 
 
 if($word)
  echo 'I feel '.$word."\n";
}


//I made this list by watching the results..
function checkForbiddenWord($word)
{
 if(strlen($word)<2) return true;
 $f[] = 'like';
 $f[] = 'for';
 $f[] = 'its';
 $f[] = 'ya';
 $f[] = 'you';
 $f[] = 'will';
 $f[] = 'that';
 $f[] = 'about';
 $f[] = 'but';
 $f[] = 'they';
 $f[] = 'is';
 $f[] = 'at';
 $f[] = 'to';
 $f[] = 'dont';
 $f[] = 'in';
 $f[] = 'when';
 $f[] = 'by';
 $f[] = 'lmao';
 $f[] = 'as';
 $f[] = 'after';
 
 if(in_array($word,$f))
  return true;
 else return false;
}

function checkNextToo($word)
{
 $f[] = 'very';
 $f[] = 'the';
 $f[] = 'not';
 $f[] = 'no';
 $f[] = 'make';
 $f[] = 'need';
 $f[] = 'needed';
 $f[] = 'kinda';
 $f[] = 'kind';
 $f[] = 'of';
 $f[] = 'so';
 $f[] = 'soo';
 $f[] = 'too';
 $f[] = 'a';
 $f[] = 'lot';
 $f[] = 'less';
 $f[] = 'alot';
 $f[] = 'little';
 $f[] = 'my';
 $f[] = 'new';
 $f[] = 'bit';
 $f[] = 'like';
 $f[] = 'giving';
 $f[] = 'soo';
 $f[] = 'really';
 $f[] = 'your';
 $f[] = 'much';
 $f[] = 'i';
 $f[] = 'because';
 
 if(in_array($word,$f))
  return true;
 else return false;
}

The results are usually pretty depressing and look something like this:


I feel old
I feel so good
I feel sick
I feel bad
I feel so alone
I feel super
I feel sorry
I feel bad


When I had it running for a couple hours I printed out the feelings people post with the font size being exactly the amount of times this word has been posted. So if "happy" would be captured 10 times it would have font size 10. This is my result ("bad" has a font size of 289px)

About this blog

Hello everyone!

I'll use this blog to post stuff (probably everything I post here will be programming related), problems I face and possible solutions.

Hopefully this will help people who are facing the same problems at some point.
Since I'm an IT systems administrator, teacher and coder I'll post about Windows and Linux Server stuff, coding in PHP and probably some shellscript.

I usually use PHP as my main scripting engine on both windows and linux because its so damn flexible and I can do almost everything with it :)

so stay tuned

<?php 
echo 'Welcome to my blog..';