(14 intermediate revisions by one other user not shown)
Line 1: Line 1:
= Project ROAR: Rhea Online Testing Resource =
+
= Project [https://www.projectrhea.org/rhea/roar/ ROAR]: Rhea Online Testing Resource =
 +
 
  
 
==Introduction==
 
==Introduction==
Project ROAR was initiated in the Spring semester of 2010, as an attempt to provide students and professors the ability to create online tests; a forum for academic interaction, where professors could test students, and students in turn could post their own questions. The inspiration for this project came from the evident lack of an open source testing platform. Freshmen in the school of engineering, physics and math for example, are required to pay as much as $25 for similar testing software, simply to have access to pre-existing quizzes and tests.  
+
Project [https://www.projectrhea.org/rhea/roar/ ROAR] was initiated in the Spring semester of 2010, as an attempt to provide students and professors the ability to create online tests; a forum for academic interaction, where professors could test students, and students in turn could post their own questions. The inspiration for this project came from the evident lack of an open source testing platform. Freshmen in the school of engineering, physics and math for example, are required to pay as much as $25 for similar testing software, simply to have access to pre-existing quizzes and tests.  
 
The RHEA Development team decided to overcome this problem by conceptualizing an open source web-app based on the Rhea server, that would give students and professors the same ability without the need for these expensive third party software.  
 
The RHEA Development team decided to overcome this problem by conceptualizing an open source web-app based on the Rhea server, that would give students and professors the same ability without the need for these expensive third party software.  
  
==The ROAR Team==
+
[https://www.projectrhea.org/rhea/roar/ ROAR] can be visited [https://www.projectrhea.org/rhea/roar/ here].
 +
 
 +
==The [https://www.projectrhea.org/rhea/roar/ ROAR] Team==
 
*Professor [[User:mboutin|Mireille Boutin]] (Faculty Adviser)
 
*Professor [[User:mboutin|Mireille Boutin]] (Faculty Adviser)
 
*[[User:masonz|Zach Mason]] (Graduate Student Adviser)
 
*[[User:masonz|Zach Mason]] (Graduate Student Adviser)
Line 38: Line 41:
 
==Code Repository==
 
==Code Repository==
  
//(for username and password contact the development team)
+
*Rather than making individual form handling pages, it is much cleaner to organize the web app using functions.
  
<?php  
+
Here is how a well organized php file ends up looking like
  
function writeMCQ2DB($assessment_id,$question_text,$choiceA,$choiceB,$choiceC,$choiceD,$correctChoice,$points){
+
<pre>
 +
*****************************************
 +
<?php
  
echo $MCQ_stuff;
 
$con = mysql_connect("localhost","username","password");
 
 
 
if (!$con)
 
  {
 
  die('Could not connect: ' . mysql_error());
 
  }
 
  
mysql_select_db("rhea", $con);
+
function basic_html(){
 
+
mysql_query("INSERT INTO roar_MCQ (assessment_id,q_text,choice_a,choice_b,choice_c,choice_d,correct,points)
+
+
VALUES ('$assessment_id,$question_text,$choiceA,$choiceB,$choiceC,$choiceD,$correctChoice,$points')");
+
+
+
mysql_select_db("rhea", $con);
+
 
+
+
mysql_close($con);
+
+
  
 +
  $html = <<<page_html
 +
              <!--------SOME HTML---------------->
 +
          page_html;
 +
  return $html;
 
}
 
}
  
function doCreateQuiz() {
+
function1(){
// session_start();
+
+
$con = mysql_connect("localhost","username","password");
+
+
+
if (!$con)
+
  {
+
  die('Could not connect: ' . mysql_error());
+
  }
+
 
+
mysql_select_db("rhea", $con);
+
 
+
mysql_query("INSERT INTO roar_assessments (name)
+
VALUES ('$_POST[qname]')");
+
+
+
mysql_select_db("rhea", $con);
+
 
+
$result = mysql_query("SELECT id FROM roar_assessments WHERE name = '$_POST[qname]'");
+
+
//echo $result;
+
+
$as_id = 0;
+
+
while($row = mysql_fetch_array($result))
+
  {
+
  $as_id = $row['id'];
+
 
+
  }
+
 
+
+
// echo $as_id;
+
 
+
$_SESSION['id'] = $as_id;  
+
+
mysql_close($con);
+
return $as_id;
+
 
}
 
}
 
+
function2(){
function drawNewQuestionForm($assessment_id) {
+
 
+
$out = <<<FOO
+
<div class="box">
+
+
+
<div class="post">
+
<div class="post-bgtop">
+
<div class="post-bgbtm">
+
<h2 class="title"><a href="#">Create your Own Quiz</a></h2>
+
+
+
<div class="entry">
+
   
+
+
                    <?php echo $id; ?>
+
+
<!--QUESTION TYPES -->
+
<h2>Select a question type to add to your quiz
+
<form action="new.php?action=multiple"  method="post"><input type="submit" value = "Multiple Choice"></form>
+
<form action="new.php?action=numeric"  method="post"><input type="submit" value = "Numeric"></form>
+
<form action="new.php?action=text"      method="post"><input type="submit" value = "Text"></form>
+
 
+
+
</div>
+
</div>
+
</div>
+
</div>
+
</div>
+
<div style="clear: both;">&nbsp;</div>
+
</div>
+
FOO;
+
 
+
   
+
return $out;
+
 
}
 
}
  
//Question forms begin here:
+
if{(some action required)  
function drawMCQ($assessment_id){
+
    $html .= functioncall1();
 
+
}elseif{(some other action)
 
+
    $html .= functioncall2();
 
+
}else{
$MCQ_form = <<<MCQ_html
+
    $html .= basic_html;
<div class="box">
+
+
+
<div class="post">
+
<div class="post-bgtop">
+
<div class="post-bgbtm">
+
<h2 class="title"><a href="#">New Question</a></h2>
+
+
+
<form name="multiplechoice" method="post" action="new.php?action=writeMCQ2DB">
+
<br/>
+
<br/>
+
Enter Question Text:
+
<br />
+
<input  type = "text" name="qtext" cols="40" rows="5">
+
+
</textarea>
+
<br/>
+
<br/>
+
A. <input name="A" type="text"/>
+
<br />
+
B. <input name="B" type="text"/>
+
<br />
+
C. <input name="C" type="text"/>
+
<br />
+
D. <input name="D" type="text"/>
+
<br />
+
<br/>
+
Correct Option:
+
<select name="answer">
+
+
<option value="1">A</option>
+
<option value="2">B</option>
+
<option value="3">C</option>
+
<option value="4">D</option>
+
</select>
+
+
<br />
+
<br />
+
Total Points <input name="points" type="text">
+
<br/>
+
<br/>
+
<input type="submit" value="Submit" />
+
</form>
+
</div>
+
</div>
+
</div>
+
+
+
+
</div>
+
<div style="clear: both;">&nbsp;</div>
+
</div>
+
 
+
MCQ_html;
+
 
+
list($html,$assessment_id,$_POST["qtext"],$_POST["A"],$_POST["B"],$_POST["C"],$_POST["D"],$_POST["answer"],$_POST["points"]) = $MCQ_stuff ;
+
 
+
return $MCQ_form;
+
 
+
//writeMCQ2DB($assessment_id,$_POST["qtext"],$_POST["A"],$_POST["B"],$_POST["C"],$_POST["D"],$_POST["answer"],$_POST["points"]);
+
 
+
return $MCQ_form;
+
 
}
 
}
function drawNum($assessment_id){
 
$NUM_form = <<<NUM_html
 
  
<div class="box">
+
echo $html;
+
?>
+
***********************************************
<div class="post">
+
</pre>
<div class="post-bgtop">
+
<div class="post-bgbtm">
+
<h2 class="title"><a href="#">New Question</a></h2>
+
+
+
Question number:
+
<form name="Multiple choice" method="post" action="new.php?action=writeDB">
+
<br/>
+
<br/>
+
Enter Question Text:
+
<br />
+
<textarea name="question text" cols="40" rows="5">
+
Enter question text here...
+
</textarea>
+
<br/>
+
<br/>
+
Correct Answer:<input name="correct" type="text"/>
+
<br />
+
<br />
+
Total Points <input name="points" type="text">
+
<br/>
+
<br/>
+
<input type="submit" value="Submit" />
+
</form>
+
+
</div>
+
</div>
+
</div>
+
+
+
+
</div>
+
<div style="clear: both;">&nbsp;</div>
+
</div>
+
NUM_html;
+
  
return $NUM_form;
+
*Thus, the entire program is extremely easy to manage and various actions can be handled separately to display certain html code that can be neatly tucked away within functions.
}
+
*Now what was given above was a very top level design of how to make a web app. The following section provides code snippets that explain the process in more detail.
function drawTxt($assessment_id){
+
$TXT_form = <<<TEXT_html
+
  
<div class="box">
+
==Actions==
+
+
<div class="post">
+
<div class="post-bgtop">
+
<div class="post-bgbtm">
+
<h2 class="title"><a href="#">New Question</a></h2>
+
+
+
Question number:
+
<form name="text" method="post" action="new.php?action=writeDB">
+
<br/>
+
<br/>
+
Enter Question Text:
+
<br />
+
<textarea name="question text" cols="40" rows="5">
+
Enter question text here...
+
</textarea>
+
<br/>
+
<br/>
+
Correct Answer:<input name="correct" type="text"/>
+
<br />
+
<br />
+
Total Points <input name="points" type="text">
+
<br/>
+
<br/>
+
<input type="submit" value="Submit" />
+
</form>
+
+
</div>
+
</div>
+
</div>
+
+
+
+
</div>
+
<div style="clear: both;">&nbsp;</div>
+
</div>
+
TEXT_html;
+
  
return $TXT_form;
+
*One of the way php decides what to do with user input data is through actions.
}
+
*HTML forms, radio buttons, checklists etc. all need a defined action when the data is submitted. The handling action may be a page, or another function within the web page.
 +
*Since we described in built functions as a better way of doing things, the method described here will use functions.
 +
<pre>
 +
<form action="index.php?action=doThis"  method="post"><input type="submit" value = "Do This"></form>
 +
</pre>
 +
*This code generates a very simple button that says Do This. The form lives inside some html code within the file index.php.
 +
*Now whenever the user presses this button, the form passes the value doThis into the form action.
 +
*This action value is now available for handling, but to access it, we need the following code:
  
 +
<pre>
 +
$action = $_GET["action"];
 +
</pre>
  
  
//********Cosmetic functions******
+
*Once this is done, the value of action lives inside the variable $action. Now this can be used to call a certain function that handles this particular action. Something like
//********************************
+
function default_html() {
+
$_html = <<<FOO
+
<div class="box">
+
<div class="post">
+
<div class="post-bgtop">
+
<div class="post-bgbtm">
+
<h2 class="title"><a href="#">Create your Own Quiz</a></h2>
+
+
+
<div class="entry">
+
    <form action="new.php?action=createQuiz" method="post">
+
    Enter Quiz title : 
+
<input type="text" name="qname" />
+
<br /><br />
+
Enter Total points :
+
<input type="text" name="points" />
+
+
+
<br /><br />
+
Time Limit?
+
<input type="radio" name="time" value="Yes" /> Yes
+
<br />
+
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
+
<input type="radio" name="time" value="no" /> No
+
+
<br/><br/>
+
  
<br/>
+
<pre>
<br/>
+
$html .= handleAction($action);
  
<button type="submit" name="create">Create</button>
 
</form>
 
 
 
</form>
 
</div>
 
</div>
 
</div>
 
</div>
 
 
 
 
</div>
 
<div style="clear: both;">&nbsp;</div>
 
</div>
 
FOO;
 
 
return $_html;
 
}
 
function site_base(){
 
$base_html = <<<EOD
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta name="keywords" content="" />
 
<meta name="description" content="" />
 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<title>ROAR - Create Quiz</title>
 
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
 
</head>
 
<body>
 
<div id="wrapper">
 
<div id="header">
 
<a href="index.php">
 
<img src="images/logocool.gif" border="0" >
 
</a>
 
<div id="logo">
 
   
 
 
 
</div>
 
</div>
 
 
</div>
 
 
 
 
<!-- end #header -->
 
<div id="menu">
 
<ul>
 
<li class="current_page_item"><a href="#">RHEA Home</a></li>
 
<li><a href="#">New Assignments</a></li>
 
<li><a href="#">Create Your Own Assignment</a></li>
 
<li><a href="#">Scores</a></li>
 
<li><a href="#">About</a></li>
 
<li><a href="#">Links</a></li>
 
<li><a href="#">Contact Us</a></li>
 
</ul>
 
</div>
 
 
 
<!-- end #menu -->
 
 
<!-- <p><font color='white'><big><strong><font color='black'>R</font></strong>hea <strong><font color='black'>O</font></strong>nline <strong><font color='black'>A</font></strong>ssessment <strong><font color='black'>R</font></strong>esource </big></font></p> -->
 
<div id="page">
 
<div id="page-bgtop">
 
<div id="page-bgbtm">
 
<div id="content">
 
EOD;
 
 
return $base_html;
 
 
}
 
//********************************
 
 
 
//***GENERATES HTML BASED ON USER ACTION***
 
 
function handleAction($action){
 
function handleAction($action){
  
if ($action == "createQuiz") {
+
if($action == "doThis"{
+
   $html = some_html_code for the desired action}
$assessment_id = doCreateQuiz();
+
   }
+
return $html
$html .= drawNewQuestionForm($assesment_id);
+
 
+
} else if ($action == "submitNewQuestion") {
+
$assessment_id = $_POST["assessment_id"];
+
// doCreateQuestion($assessment_id)
+
+
$html .= drawNewQuestionForm($assessment_id);
+
+
} else if ($action == "addQuestion"){
+
 
+
   $html .= addQuestion($assessment_id);
+
 
+
  //We have now selected the question
+
 
+
}else if ($action == "multiple"){
+
  $html .= drawMCQ($assessment_id); //Go to MCQ form
+
}else if($action == "numeric"){
+
   $html .= drawNum($assessment_id); //Go to Numeric form
+
}else if($action == "text"){
+
  $html .= drawTxt($assessment_id); //Go to Text Form
+
 
+
  //This action puts respective form data into the database
+
 
+
}else if($action == "writeMCQ2DB"){
+
writeMCQ2DB($assessment_id,$_POST["qtext"],$_POST["A"],$_POST["B"],$_POST["C"],$_POST["D"],$_POST["answer"],$_POST["points"]);
+
  
}
 
 
 
 
 
 
 
else {
 
// if createNewQuiz
 
$html .= default_html();
 
 
}
 
}
  
return $html;
+
</pre>
}
+
//*****************************************
+
  
$html = site_base(); //Draw basic page
 
  
$action = $_GET["action"]; //Receive user action
+
*What this means is that everytime the variable action receives the value doThis from the above form, the handleAction function loads
 
+
the desired action html code into the variable $html which is returned by the handleAction function.
$html .= handleAction($action); //Menu to handle action
+
*Once returned the statement
 
+
<pre>$html .= handleAction($action); </pre>appends the returned html code to the existing html code hence effectively handling the action without changing the basic page structure.
echo $html; //Echo action specific html
+
//****************************************
+
//****************************************
+
//****************************************
+
?>
+
 
+
 
+
<!--User Interaction ends here-->
+
<div id="sidebar">
+
    <div class="box">
+
<ul>
+
<li>
+
<h2>Login</h2>
+
+
<form>
+
                    Username:  <input type="text" name="" />
+
                    <br />
+
                    Password:  <input type="text" name="" />
+
<br />
+
<input type="submit" value="login" />
+
                    </form>
+
</a>
+
</li>
+
    <li>
+
<h2>Assigment list</h2>
+
<ul>
+
<li><a href="#">New Assignments</a> (3)<span>note</span></li>
+
<li><a href="#">Completed</a> (42)<span>list</span></li>
+
</ul>
+
</li>
+
<li>
+
<h2><a href=""><font color="white">Make a quiz</font></a></h2>
+
<ul>
+
<li> </li>
+
<li> </li>
+
<li> </li>
+
</ul>
+
</li>
+
<li>
+
<h2>Archives</h2>
+
<ul>
+
<li><a href="#">December 2009</a>&nbsp;(29)<span></span></li>
+
<li><a href="#">November 2009</a>&nbsp;(30)<span></span></li>
+
<li><a href="#">October 2009</a>&nbsp;(31)<span></span></li>
+
</ul>
+
</li>
+
</ul>
+
</div>
+
</div>
+
+
<!-- end #sidebar -->
+
<div style="clear: both;">&nbsp;</div>
+
</div>
+
</div>
+
</div>
+
<!-- end #page -->
+
</div>
+
<div id="footer">
+
<p>Rhea Online Assessment Resource</a>.</p>
+
</div>
+
<!-- end #footer -->
+
</body>
+
</html>
+
  
  
  
 +
==Entire Code==
 +
*To access the entire code, you may click the link below
 +
*[[Media:ROAR_REV_04_09_2010.zip]]
 +
*[[Media:ROAR_REV_04_11_2010.zip]]
 +
*[[Media:ROAR_REV_04_30_2010.zip]]
  
 +
==User Manual==
 +
ROAR currently lives on a test server at web page : msee393mac3.ecn.purdue.edu/roar which is our test page.
 +
The web page allows professors to create assessments for their classes and later place links for the created assignments on their web page.
 +
To do this, the following instructions apply:
 +
*1:Click on the link Create New Assignment
 +
*2:Login with your username and password ******** (At the moment, to test ROAR beta 1.1 we are only giving out the password for creating quizzes to users who want to participate in the Beta testing process. To get the password, please email dlamba above)
 +
*3:Once logged in, you may use the on-screen menu to create your quiz.
 +
*4:When finished, you may place a link to the created quiz on the New Assignments page by simply clicking Complete Quiz followed by OK.
 +
*5:To place a link on your own course page/website you may simply right click on the link to your quiz and click on Copy Link Location.
 +
*6:When on your webpage/Rhea page, simply paste the hyperlink to the assessment and this should make a link to the quiz available.
 +
  
 +
==Semester Summary and Future Goals==
  
 +
The learning curve for making this web application was obviously a big one. While we got a basic page working that allows logged in users to create a quiz, as well as take one of the available quizzes; there were several more features that are summarized below that we would have liked to integrate into ROAR had we more time:
 +
*The ability to have a formula bar to allow users type in symbolic equations into the questions.
 +
*The ability to have a picture upload section in the question making section to allow users to add graphs, pictures and scanned notes
 +
*The ability to have an equation checking algorithm that would let quiz takers enter a formula, in LaTex for example, and check for its correctness.
  
  
[[User:Dlamba|Dlamba]] 20:47, 4 April 2010 (UTC)
+
Last Edit:[[User:Dlamba|Dlamba]] 21:30, 3 May 2010 (UTC)

Latest revision as of 05:32, 28 May 2010

Project ROAR: Rhea Online Testing Resource

Introduction

Project ROAR was initiated in the Spring semester of 2010, as an attempt to provide students and professors the ability to create online tests; a forum for academic interaction, where professors could test students, and students in turn could post their own questions. The inspiration for this project came from the evident lack of an open source testing platform. Freshmen in the school of engineering, physics and math for example, are required to pay as much as $25 for similar testing software, simply to have access to pre-existing quizzes and tests. The RHEA Development team decided to overcome this problem by conceptualizing an open source web-app based on the Rhea server, that would give students and professors the same ability without the need for these expensive third party software.

ROAR can be visited here.

The ROAR Team

Documentation

  • Project ROAR is intended to be a long-term project that starts off with a concept and basic functionality, which can then be expanded by future teams.
  • This page will serve as the ROAR development team project log, wherein all the documentation and project details may be accessed by future development teams.


The initial thought process: how ROAR was born

This section includes a preview of what the development team initially came up with for how ROAR should look and feel, as well as its functionality. The following PDF includes the thinking behind the name ROAR, as well as a mock web page showing its intended features.

Media:roar_concept.pdf


Tools

  • Since the eventual goal for ROAR is to be integrated into the MediaWiki platform where RHEA lives, what is needed is a php or javascript based web app that communicated with the RHEA database.
  • Therefore, for those interested in the project, a working knowledge of the following tools is recommended:
    • HTML
    • PHP
    • CSS
    • SQL
  • In addition knowing how to set up and work on a LAMP/WAMP server is very useful.


Code Repository

  • Rather than making individual form handling pages, it is much cleaner to organize the web app using functions.

Here is how a well organized php file ends up looking like

*****************************************
<?php


function basic_html(){

   $html = <<<page_html
              <!--------SOME HTML---------------->
           page_html;
   return $html;
}

function1(){
}
function2(){
}

if{(some action required) 
     $html .= functioncall1();
}elseif{(some other action)
     $html .= functioncall2();
}else{
     $html .= basic_html;
}

echo $html;
?>
***********************************************
  • Thus, the entire program is extremely easy to manage and various actions can be handled separately to display certain html code that can be neatly tucked away within functions.
  • Now what was given above was a very top level design of how to make a web app. The following section provides code snippets that explain the process in more detail.

Actions

  • One of the way php decides what to do with user input data is through actions.
  • HTML forms, radio buttons, checklists etc. all need a defined action when the data is submitted. The handling action may be a page, or another function within the web page.
  • Since we described in built functions as a better way of doing things, the method described here will use functions.
<form action="index.php?action=doThis"  method="post"><input type="submit" value = "Do This"></form>
  • This code generates a very simple button that says Do This. The form lives inside some html code within the file index.php.
  • Now whenever the user presses this button, the form passes the value doThis into the form action.
  • This action value is now available for handling, but to access it, we need the following code:
$action = $_GET["action"];


  • Once this is done, the value of action lives inside the variable $action. Now this can be used to call a certain function that handles this particular action. Something like
$html .= handleAction($action);

function handleAction($action){

if($action == "doThis"{
   $html = some_html_code for the desired action}
   }
return $html

}


  • What this means is that everytime the variable action receives the value doThis from the above form, the handleAction function loads

the desired action html code into the variable $html which is returned by the handleAction function.

  • Once returned the statement
$html .= handleAction($action); 
appends the returned html code to the existing html code hence effectively handling the action without changing the basic page structure.


Entire Code

User Manual

ROAR currently lives on a test server at web page : msee393mac3.ecn.purdue.edu/roar which is our test page. The web page allows professors to create assessments for their classes and later place links for the created assignments on their web page. To do this, the following instructions apply:

  • 1:Click on the link Create New Assignment
  • 2:Login with your username and password ******** (At the moment, to test ROAR beta 1.1 we are only giving out the password for creating quizzes to users who want to participate in the Beta testing process. To get the password, please email dlamba above)
  • 3:Once logged in, you may use the on-screen menu to create your quiz.
  • 4:When finished, you may place a link to the created quiz on the New Assignments page by simply clicking Complete Quiz followed by OK.
  • 5:To place a link on your own course page/website you may simply right click on the link to your quiz and click on Copy Link Location.
  • 6:When on your webpage/Rhea page, simply paste the hyperlink to the assessment and this should make a link to the quiz available.


Semester Summary and Future Goals

The learning curve for making this web application was obviously a big one. While we got a basic page working that allows logged in users to create a quiz, as well as take one of the available quizzes; there were several more features that are summarized below that we would have liked to integrate into ROAR had we more time:

  • The ability to have a formula bar to allow users type in symbolic equations into the questions.
  • The ability to have a picture upload section in the question making section to allow users to add graphs, pictures and scanned notes
  • The ability to have an equation checking algorithm that would let quiz takers enter a formula, in LaTex for example, and check for its correctness.


Last Edit:Dlamba 21:30, 3 May 2010 (UTC)

Alumni Liaison

Ph.D. 2007, working on developing cool imaging technologies for digital cameras, camera phones, and video surveillance cameras.

Buyue Zhang