More Related Content Similar to Presentation 2 Similar to Presentation 2 (20) 1. Team Members: Iovan Claudia
Matei Gabriela
Nania Mihai
Popa Alexandru
Speaker: Matei Gabriela
2. About
SocialX, our exercise sharing tool, is an
application to e-learning of a simple reputation system to
increase the student motivation and interaction, and to
let them learning from each other, either by reusing
other's solutions or by correcting other's mistakes.
Moreover, students gain reputation from others reusing
their solutions.
The SOCIALX system allows three types of users:
● Administrators.
● Teachers-upload lectures, add exercises to
topics of their lectures and “endorse” a solution by
stating if it's correct or wrong.
● Students-browse courses, exercises and
solutions and add votes and new solutions
WAD 2012
3. Objectives
• The subject of this presentation is an efficient
and flexible web application aimed at managing an e-
learning site. It has the ability to offer users a way to
learn from distance (home computer), by providing
the necessary materials in a more attractive and
flexible form.
• It can be used by any teacher and student. It has an
easy to use interface, simple, friendly and efficient at
the same time, and users can easily accommodate
with it.
• A web application is commonly structured as a three-
tiered application
- Web Browsers (Presentation/ User Interface)
- Engine using some dynamic Web content
technology (Application Logic)
- Database (Storage)
WAD 2012
4. User Interface
The user interface is the system which helps
users communicate with the computer system and/or the
application system
Technologies used:
- HTML (Hyper Text Markup Language)
-CSS (Cascading Style Sheets)
-JavaScript
WAD 2012
6. Login Page– Source Code
</head> .logo {
<body> font-size: 50px;
<div> font-family: "Brush Script MT";
<div align="right"></div> color: #FFF;
<div id="logo"> height: 30px;
<h1 align="justify" class="logo"><a href="#">SocialX</a></h1> font-weight: lighter;
</div> top: 10px;
<hr /> bottom: 10px;
<!-- end #logo --><!-- end #header --> }
<div id="page"> .lala { color: #238EC6;
<div id="content"> font-size: 36px;
<div id="page2"> text-decoration: none;
<div style="clear: both; font-size: 24px;"> }
<h2 align="center" class=""><a href="#" .t { font-family: Arial, Helvetica, sans-serif;
class=""><span class="lala"><em>Welcome to font-size: 18px;
SocialX</em></span></a></h2> color: #238EC6;
<p align="center"> </p> }
<div class="entry">
<blockquote>
<p class="t"> Welcome to SocialX, our exercise
sharing tool, an application to e-learning of a simple reputation system to
increase the student motivation and interaction. </p>
</blockquote>
</div>
</div>
WAD 2012
8. Register Page- Source Code
<tr> h1, h2, h3 {
<th height="100" scope="col"><div align="justify"> margin: 0;
<dl>
<dl> text-transform: uppercase;
<dt> </dt> font-weight: normal;
<div align="right">*Username: color: #549900;
<input name="textfield2" type="text" id="textfield" size="50" border-top-style: solid;
maxlength="30" />
</div> border-right-style: solid;
<dt> </dt> border-bottom-style: solid;
<div align="right"> <br /> border-left-style: solid;
*Email:
<input name="textfield2" type="text" id="textfield" size="50" width: 800px;
maxlength="30" /> height: 50px;
</div> }
<dt> </dt>
<div align="right"> <br />
*Password: h1 {
<input name="textfield3" type="password" id="textfield2" size="50" font-size: 36px;
maxlength="30" />
</div>
}
<dt> </dt>
<div align="right"> <br /> h2 { font-size: 18px; }
*Confirm Password:
<input name="textfield4" type="password" id="textfield4" size="50"
maxlength="30" /> h3 { }
</div>
<dt> </dt>
<div align="right"> </div>
<dt> </dt>
<div align="right"> </div>
<div align="right"> </div>
<div align="right">**About You:
<input name="textfield" type="password" id="textfield3" size="50"
maxlength="100" />
<dt> </dt>
</div>
</div></th>
WAD 2012
10. Home Page- Source Code
div id="menu">
< #menu {
<ul> float: left;
width: 600px;
<li><a href="home.html" class="first"> height: 90px;
<li class="current_page_item"><a href="#">profile</li></a> }
<li><a href="cps.html">courses </a></li> #menu ul {
<li><a margin: 0;
href="http://wad12team9.blogspot.ro/">Contact</a></li> padding: 20px 0px 0px 0px;
</ul> list-style: none;
</div> line-height: normal;
<!-- end #menu --> }
<div id="search">
<form method="get" #menu li {
action=""> display: block;
float: left;
<fieldset> }
<input type="text" name="s" id="search-text" size="15"
/> <div onmouseover="mOver(this)" onmouseout="mOut(this)"
>Home</div>
<input type="submit" id="search-submit" value="GO" /> <script>
function mOver(obj)
</fieldset>
{
</form>
obj.innerHTML="news page"
</div>
}
function mOut(obj)
{
obj.innerHTML="Home"
}
</script>
WAD 2012
13. Profile Page – Source Code
<div class="profile" id="profile"> .profile {
<p> border-top-style: double;
border-right-style: double;
<img src="teacher.png" alt="" align="left" border-bottom-style: double;
width="217" height="182" > <b> <font size="5" border-left-style: double;
>Teacher Name</p>
<p><font size="3">Description: the phrase that the width: 650px;
teacher introduced about himself when it's registring left: 10px;
</p> top: 10px;
<blockquote> right: 10px;
<blockquote> </blockquote> bottom: 10px;
</blockquote> margin-top: 10px;
<form id="form1" action=""> margin-right: 125px;
<div align="justify"> margin-bottom: 10px;
<input name="button" type="submit" margin-left: 125px;
class="butoane" id="button" value="Courses" /> }
<input name="button2" type="submit" .butoane {
class="butoane" id="button2" value="Problems" /> font-size: 16px;
<input name="button3" type="submit" color: #F60;
class="butoane" id="button3" value="Solutions" />
</p> }
</div>
</form>
</div>
WAD 2012
15. Courses Page – Source Code
<div class="abc" id="prev"> .abc {
<table border-top-style: solid;
width="850" height="271" border="1" align="center"> border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
<tr>
width: 860px;
height: 290px;
<td height="265"><p align="justify">Course/Lectures Description</p> }
.abc1 {
<td width="168"><form id="form1" method="post" action=""> width: 600px;
top: 10px;
<p align="center"> bottom: 5px;
border: medium solid #D6D6D6;
<label for="select"></label>Courses List height: 300px;
}
<select name="select" size="5" id="select">
.abc2 {
height: 300px;
width: 250px;
<option>Course 1</option> border-top-width: medium;
</select> border-right-width: medium;
</form></td> border-bottom-width: medium;
</tr> border-left-width: medium;
</table> border-top-style: solid;
border-right-style: solid;
<p> </p>
border-bottom-style: solid;
</div> border-left-style: solid;
right: 690px;
}
WAD 2012
