WESSY

Alexa Cristina cristina.alexa@info.uaic.ro Butnariu Ioana-Roxana ioana.butnariu@info.uaic.ro

Facultatea de Informatica, Universitatea Alexandru Ioan Cuza

1.Introduction Wessy is an Web application that allows users to guess the names of celebrities with the help of photos. The quiz can be either a test grid or it allows to the user to write down the name of the celebrity. We have three quiz :one for actors, one for celebrities from sports and one for musicians. For the actors we used Google Docs and JavaScript . We have created a script which fetches data from Google Spreadsheet and display them one by one. The access to any quiz is based on a previous registration in the database of the website. Any unregistered user doesnt have access to the tests. Also, registered users benefit from an accurate history and scores. The best scores will be made public. Each user will have access to his history score and the highest score can be seen by everyone. 2.Used Technologies Our application uses the Apache server and MySql of XAMPP(version 1.8.1). XAMPP is a free and open source, cross-platform web server solution stack package, consisting mainly of the Apache HTTP Server, MySQL database, and interpreters for scripts written in the PHP and Perl programming languages. To be able to work with the database we used phpMyAdmin application. phpMyAdmin is a tool written in PHP intended to handle the administration of MySQL servers over the Web. Currently it can create and drop databases, create/drop/alter tables and views, delete/edit/add fields, execute any SQL statement, manage keys on fields, manage privileges, manage triggers and stored procedures, export data into various formats. HTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. JavaScript is a prototype-based scripting language that is dynamic, is type safe, and has first-class functions. Its syntax was influenced by the language C. JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the self and Scheme programming languages. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. Ajax is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest

object. Despite the name, the use of XML is not required (JSON is often used instead), and the requests do not need to be asynchronous. We also used Google Apis and Flickr Apis. Google APIs is a set of JavaScript APIs developed by Google that allows interaction with Google Services and integration of rich, multimedia, search or feed-based Internet content into web applications. They extensively use AJAX scripting and can be easily loaded using Google Loader. RSS Rich Site Summary is a family of web feed formats used to publish frequently updated workssuch as blog entries, news headlines, audio, and videoin a standardized format. An RSS document (which is called a "feed", "web feed", or "channel") includes full or summarized text, plus metadata such as publishing dates and authorship. 2.Application architecture For the register and login we work with PHP. When we want to register we need an username, password and an e-mail. After registration we send an e-mail to every user to confirm. In order to provide security, the passwords are encoded using a hash function, and then saved into the database together with the e-mail address and a nickname. We made three examples of tests. Each of them with a different theme. A quiz that features famous actors, one for famous musicians and bands an one for famous sportsmen. For the first example, the one with the actors, we used Google Docs and JavaScript bound together by a Google Api inside the html file. We have created a script that fetches data from a Google Spreadsheet we and display them one by one. The quiz starts with a button Start. For each question the user gets a photo and four possible answers. Each photos is taken from our fenrir server. For each question we have three photos, and we pick one in a random way every time. For the sports celebrities we used arrays. We have arrays for questions, answers and right answers and we also have three arrays for photos. Every time when we start the test, one of the three photos will be chosen randomly . This quiz allows the user to write down the name of the celebrity. For the quiz with the singers and bands, we used the same Google Api, Google Docs and JavaScript as for the actors quiz, except that this time, we used a Flickr Api to get photos for every question. In order to do that, we use the application to look for a picture using the data from the correct answer field, and the picture obtained this way is shown to the user, together with the question and the possible answers. In order to make a good interface , our project uses HTML5 and CSS(Cascade Style Sheets) and JavaScript. Also, every user has access to previously obtained scores, in order to implement this we used Ajax, and PHP for easy access to the database.

Of course, there is a general ranking where we show to the users the best scores obtained in the game. For this we use RSS, and for easy access to the database, some PHP.

3. Implementation details Logging in/Registering

Here is some sample code for the login part: <?php require_once'Database.php'; require_once 'Login.php'; if(isset($_POST['LOGIN'])) { $db=new Database(); $lm=new Login($db); if(isset ($_POST['persistent'])) $lm->persistent = TRUE; try { $lm->login($_POST['username'],$_POST['password']); header('Location:Wessy.php');

} catch(Exception $e) { echo'Exception: ' . $e ->getMessage().PHP_EOL; } $db->close(); } ?> And the actual function is: function login($user, $pass){ // username trebuie sa contina litere mari si mici, cifre, - _ . if (!preg_match('/^[a-zA-Z0-9][a-zA-Z0-9-_.]+$/', $user)) { throw new Exception('Username contine caractere invalide'); } $stmt = $this -> dbCon -> stmt_init(); if ( $stmt -> prepare("SELECT idu, password, pass FROM utilizatori WHERE username = ?") ){ $stmt -> bind_param('s', $user); if ($stmt -> execute()){ $stmt -> store_result(); $stmt -> bind_result($userId, $hashR, $saltR); $stmt -> fetch(); if( $stmt -> num_rows === 1 ){ $hash = createHash($pass, $saltR); // Daca hash-ul obtinut din parola data la logare este // identic hash-ul din db atunci userul poate fi logat if ($hash === $hashR){ if ($this -> persistent === TRUE){ session_set_cookie_params(60*60*24*30); } // Setam un nume pentru cookie-ul ce va tine id-ul sesiunii session_name(cookieName); // Creem sessiunea // Paremetrii si nume sesiunii trebuie sa fie setate inainte // de a apela session_start() session_start();

// Stocam id-ul userului $_SESSION['userID'] = $userId; created'; echo 'Logged', PHP_EOL, 'Session with id ', session_id(), ' was } else { echo $hash; } } else { echo $stmt -> sqlstate; } } else { echo $stmt -> sqlstate; return FALSE; } $stmt -> close(); } else { echo $stmt -> sqlstate; }

The logout is done this way: <?php require_once 'Database.php'; require_once 'Login.php'; $db = new Database(); $lm = new Login($db); if(isset($_GET['logout'])){ $lm -> logout(); header('Location: Wessy.php'); } ?>

The tests

This image is extracted from the music theme quiz. The code for obtaining the image is: This is where we obtain the key words to search for photos on Flickr: var temp; if (response.feed.entry[currentQuestion].gsx$answer.$t == "a") temp = response.feed.entry[currentQuestion].gsx$optiona.$t; else if (response.feed.entry[currentQuestion].gsx$answer.$t == "b") temp = response.feed.entry[currentQuestion].gsx$optionb.$t; else if (response.feed.entry[currentQuestion].gsx$answer.$t == "c") temp = response.feed.entry[currentQuestion].gsx$optionc.$t; else if (response.feed.entry[currentQuestion].gsx$answer.$t == "d") temp = response.feed.entry[currentQuestion].gsx$optiond.$t; showpics(temp); And this is the actual function that retrieves the images using the Api from Flickr: function showpics(to_search) { document.getElementById("imgs").innerHTML=""; var url = http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=ea3817fa4e2a33b 989b3e2630f09ecac&tags=" + to_search + "&safe_search=1&per_page=1"; var src; $.getJSON(url + "&format=json&jsoncallback=?", function(data) { $.each(data.photos.photo, function(i, item) { src = "http://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_m.jpg"; $(" }); } ").attr("src", src).appendTo("#imgs"); });

After completing every test, we gather the information about the scores.So, in order to send the information from the test to the database we use: var dataStr = 'reg_score=reg_score&myScore='+totalCorrect; $.ajax({ type: 'POST', url: 'scores.php', data: dataStr, success: function() { } }); And the actual work with the database is done in here: <?php require_once 'manager_score.php'; require_once 'Database.php'; $db = new Database(); $ms = new manager_score($db); $ms -> showScores(); //$ms -> showScoresByPoints(); //echo $ms -> totalScore(); //$ms ->showScoresBest(2); //$ms->showScoresForUser(); if(isset($_POST['reg_score'])){ try { $ms->addScore($_POST['myScore']); } catch(Exception $e){ echo $e ->getMessage(); } } ?> $db -> close();

The rankings The code for showing the best scores is: <?php require_once 'Database.php'; require_once 'manager_score.php'; $db = new Database(); $ms = new manager_score($db);

$ms -> showScoresBest(3); $db -> close(); ?> And the actual functions are: <?php require_once 'configuratie.php'; class manager_score { private $db; function __construct($dbCon){ $this->db = $dbCon; } function addScore($userScore){ session_name(cookieName); session_start(); $userID = $_SESSION['userID']; if (!preg_match('/^[0-9]+$/', $userScore)) { throw new Exception('Username contine caractere invalide'); } $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("INSERT INTO scores VALUES(?,?,NOW())")){ $stmt -> bind_param('dd',$userID, $userScore); if ( !$stmt -> execute()){ return FALSE; } $stmt -> close(); } else { return FALSE; }

function showScores(){ $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT u.username, s.score, s.added FROM scores s, users u WHERE u.idu=s.idu ORDER BY s.added desc")){ if ( $stmt -> execute()){ $stmt -> bind_result($username, $score, $date);

echo '<table id="scores">'; while ($stmt -> fetch()){ echo '<tr><td>',$username,'</td><td>',$score,'</td><td>',$date,'</td></tr>'; } echo '</table>'; } $stmt -> close(); } } function showScoresForUser(){ session_name(cookieName); session_start(); $userID = $_SESSION['userID']; $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT score, added FROM scores WHERE idu=? ORDER BY added desc")){ $stmt -> bind_param('d',$userID); if ( $stmt -> execute()){ $stmt -> bind_result($score, $date); echo '<table id="scores">'; while ($stmt -> fetch()){ echo '<tr><td>',$score,'</td><td>',$date,'</td></tr>'; } echo '</table>';

} $stmt -> close();

function showScoresBest($nr){ $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT u.username, s.score, s.added FROM scores s, users u WHERE u.idu=s.idu ORDER BY s.score desc LIMIT 0,?")){ $stmt -> bind_param('d',$nr); if ( $stmt -> execute()){ $stmt -> bind_result($username, $score, $date); echo '<table id="scores">'; while ($stmt -> fetch()){ echo '<tr><td>',$username,'</td><td>',$score,'</td><td>',$date,'</td></tr>'; }

echo '</table>'; } } $stmt -> close();

function showScoresByPoints(){ $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT u.username, s.score, s.added FROM scores s, users u WHERE u.idu=s.idu ORDER BY s.score desc")){ if ( $stmt -> execute()){ $stmt -> bind_result($username, $score, $date); echo '<table id="scores">'; while ($stmt -> fetch()){ echo '<tr><td>',$username,'</td><td>',$score,'</td><td>',$date,'</td></tr>'; } echo '</table>'; } $stmt -> close(); } } function totalScore(){ session_name(cookieName); session_start(); $userID = $_SESSION['userID']; $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT SUM(score) FROM scores WHERE idu=?")){ $stmt -> bind_param('d', $userID); if ( $stmt -> execute()){ $stmt -> bind_result($totalScore); $stmt -> fetch(); return $totalScore; } $stmt -> close(); }

function atomScores(){ $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT u.username, s.score, s.added FROM scores s, users u WHERE u.idu=s.idu ORDER BY s.added desc")){ if ( $stmt -> execute()){

$stmt -> bind_result($username, $score, $date); while ( $stmt -> fetch() ){ echo '<entry> <author>',$username,'</author> <title>',$username,'</title> <content>Has ',$score,' points on ',$date,'</content> </entry>'; }

} $stmt -> close();

function atomScoresByPoints(){ $stmt = $this -> db -> stmt_init(); if ($stmt -> prepare("SELECT u.username, s.score, s.added FROM scores s, users u WHERE u.idu=s.idu ORDER BY s.score desc")){ if ( $stmt -> execute()){ $stmt -> bind_result($username, $score, $date); while ( $stmt -> fetch() ){ echo '<entry> <author>',$username,'</author> <title>',$username,'</title> <content>Has ',$score,' points on ',$date,'</content> </entry>'; }

} ?>

} $stmt -> close();

4. Conclusions This Web application can be extended by adding more tests and games and maybe giving the users the possibility of interaction. Also, a way to improve it would be, of course, asking the people that are using it about the flows and the strengths. In order to achieve this we should implement a form that any user would have access to, and where it could leave suggestions, complaints etc.