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