~mypsm~

Sunday, January 6, 2013

Salam and have a nice day..

1) Testing and experiment done - 17 dec 2012 - 18 dec 2012
2) Report done - will submit it today

** Other progress --> Will edit some coding ^_^
** Presentation --> 22 Jan 2012

Sunday, November 25, 2012

Others task on progress

Others task still on progress :

Randomize
Problem update attempt, ss_attempts and ss_id in database

psm progress ^_^

Assalam and have a good day to all..

First of all, am so so sorry to my lovely supervisor because dah lama x update blog. But my psm progress going smoothly even stuck somewhere..hehehe!!

1/11/2012 - done demo 1

Demo 1 success with register the game and save the images in database... ^_^

Here the progress of my psm :

1) Game Registration

All draggable image boleh update dalam database and validation also function.
Image yang dipilih tidak bertindan kat pair1 and pair2.
Below is the figure :

Interface register game

After choose image

Chosen Image update at database

2) Login to game

Chosen images during register appear at pair1 based on user username. Username is primary key in database
User can try to login only 3 times
Below is the figures:

chosen Images at pair1

if login failed more than 3 attempts

Problem : Count of attempt in database = 1, did not update untill 3 times.

4) Feedback : all update to database after user answer the question

Feedback in database

5) Shoulder surfing

Account for SS registration - successful update in database

SS Register Account

SS Account update in database

SS login to game

SS Successful login

SS Failed Login

Problem : SS attempt and SS_ID did not update in database

Monday, October 8, 2012

Alhamdulillah..usaha yg tak sia2, walaupun feel like nak muntah tgk coding but finally berjaya mendrag drop kan image..hehehehe happy2!! even byk yg kena improve but yg penting basic tu dh berjaya..

Here the coding and the view :
<head>
<title></title>
<link href="css/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="js/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.droppable.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
<link href="css/demos.css" rel="stylesheet" type="text/css" />

<style type="text/css">
#group1_a, #group1_b, #group1_c { width: 60; height: 60}
#group1_1, #group1_2, #group1_3 { width: 60; height: 60}
</style>
<script language ="javascript" charset="utf-8" type="text/javascript">
$(document).ready(function () {
$("#group1_a").draggable({ revert: "invalid" });
$("#group1_b").draggable({ revert: "invalid" });
$("#group1_c").draggable({ revert: "invalid" });
$("#group1_d").draggable({ revert: "invalid" });
$("#group1_e").draggable({ revert: "invalid" });
$("#group1_f").draggable({ revert: "invalid" });
$("#group1_g").draggable({ revert: "invalid" });
$("#group1_h").draggable({ revert: "invalid" });
$("#group1_i").draggable({ revert: "invalid" });

$("#group1_1").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});

$("#group1_2").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});

$("#group1_3").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});

$("#group1_4").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});

$("#group1_5").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});

$("#group1_6").droppable(
{
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});

});
</script>
<style type="text/css">
.style1
{
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="style1">
<div class="style1">
<br />
WELCOME TO 3 MATCHING PICTURES GAME
</div>
<div id="text" class="style1">
<br />
IMAGE AREA
<br />
</div>
<img src="images/group1/group1_a.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_a" />
<img src="images/group1/group1_b.jpg" width='60' height='60' alt='group1_b' class="box" id="group1_b" />
<img src="images/group1/group1_c.jpg" width='60' height='60' alt='group1_c' class="box" id="group1_c" />
<p>
<img src="images/group1/group1_d.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_d"/>
<img src="images/group1/group1_e.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_e"/>
<img src="images/group1/group1_f.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_f"/>
</p>
<p>
<img src="images/group1/group1_g.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_g"/>
<img src="images/group1/group1_h.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_h"/>
<img src="images/group1/group1_i.jpg" width='60' height='60' alt='group1_a' class="box" id="group1_i"/>
</p>
</div>
<div class="style1">
<br />
PAIR 1
<br />
<img src="" width='60' height='60' alt='' class="box1" id="group1_1" />
<img src="" width='60' height='60' alt='' class="box1" id="group1_2"/>
<img src="" width='60' height='60' alt='' class="box1" id="group1_3"/>
<br />
PAIR 2
<br />
<img src="" width='60' height='60' alt='' class="box1" id="group1_4" />
<img src="" width='60' height='60' alt='' class="box1" id="group1_5"/>
<img src="" width='60' height='60' alt='' class="box1" id="group1_6"/>
<br />
<asp:Button ID="Button1" runat="server" Text="REGISTER" />
<br />
</div>
</form>
</body>
</html>

Next step : Database and how to connect with server ^_@

Thursday, October 4, 2012

Testing Jquery

1st time test jquery..there is result :

Mata bulat2 tgk coding through utube.. here the coding

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="jqueryexample.aspx.vb" Inherits="jqueryexample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.core.js" type="text/javascript"></script>
<link href="css/demos.css" rel="stylesheet" type="text/css" />
<script src="js/ui/jquery.ui.tabs.js" type="text/javascript"></script>

<script language ="javascript" type="text/javascript">
$(document).ready(function () {
alert('jquery is reaady now');
});
</script>
</head>
<body>
</body>
</html>

Wednesday, October 3, 2012

sketch yg x cantik.. ^_@

Discussion with sammy yang byk membantu... to understand client and server function. Gambar bwh for masterpage planning.

Bila penat ngadap google so exercise kan tgn wt sketch. Walaupun x cntik but very valuable to me.. hehehehe!!!

1 week progress

27/9/2012 - 3/10/2012

Search coding for core function (Drag drop images)
Make few interface - Masterpage and registration ( general and game)
Explore asp.net and JQuery function

Simple step how to install JQuery in visual studio 2012

Download JQuery at http://jqueryui.com/download
Open visual basic 2010 and open your website or open new website
Make new folder named css and js under your website
After done downloaded JQuery, example : Jquery-ui.1.8.24.custom, inside the folder have sub folder named css, development-bundle, jquery-ui-1.8.24 and js.
Under development-bundle, copy folder theme and demos.css and paste at css folder (at your website solution explorer), copy folder UI and paste under js folder.
Under js, copy jquery-1.8.24.min.js and jquery-ui.1.8.24.custom.min.js (depends on Jquery version) and paste at js folder (at your website solution explorer).

To make more understanding, click on this link http://www.youtube.com/watch?v=OHfo3QjDjGM

What is JQuery?

Jquery adalah code library untuk javascript. kalau secara traditional, nak buat slide scroll image, kita kena tulis satu-satu line javascript secara manual. kemudian test sama ada jadi ke tak.. pastu test plak atas browser berlainan dia jalan atau tidak. dengan jquery nih, kita hanya guna function library yang dah dibina (kira javascript framework).

Maknanya kita hanya recall function dan set variable untuk penuhi keperluan kita, script dijalankan terus (minimal time untuk create slide scroll). dan dia adalah crossbrowser. maknanya dah tak perlu nak check compatible tak dengan semua browser. antara library javascript yang lain, mcm ExtJS, mootools.. tapi yang paling femes adalah JQuery.

* Banyak benda lg yg perlu diexplore.. ^_^ fighting!!!!