Presentation 2
- 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
- 5. Login Page Overview 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
- 7. Register Page-Overview 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
- 9. Home Page - Overview 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
- 11. Profile Page1 - Overview WAD 2012
- 12. Profile Page2 - Overview 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
- 14. Courses Page - Overview 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
- 16. LogOut Page - Overview WAD 2012