// color of the first and the third column
var first3rdColColor = "#66FF66";
//var first3rdColColor = "#CCCCFF";

// color of hte second column
var secondColColor = "#E6E6E6";


// array to store the answers that need to be shown
var showAnswers = new Array();
var TotalNoOfElements = 0;

// function that display the questions and options
function displayQuestions(title)
{
	var firstColWidth = "50%";
	var secondColWidth = "20%";
	var thirdColWidth = "30%";
	var counter = 0;
	var Optioncounter = 0;
	var topic = title;	
	document.writeln("<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n");
	document.writeln("<tr><td>");
	document.writeln("<table width=\"100%\" align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n");
	document.writeln("<tr> ");
    document.writeln("<td width=\"50%\" bgcolor=\"" + first3rdColColor + "\"> ");		 
    document.writeln("<div align=\"center\"><b>Tips for getting the Most out of " + topic + "</b></div>");
    document.writeln("</td>");
    document.writeln("<td width=\"20%\" bgcolor=\"" + secondColColor + "\"> ");
    document.writeln("<div align=\"center\">&nbsp;</div>");
    document.writeln("</td>");
    document.writeln("<td width=\"30%\" bgcolor=\"" + first3rdColColor + "\"> ");
    document.writeln("<div align=\"center\">");
    document.writeln("<table width=\"85%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
    document.writeln("<tr valign=\"top\">"); 
    document.writeln("<td colspan=\"3\"> ");
    document.writeln("<div align=\"center\"><b><u>My Action Plan</u></b></div>");
    document.writeln("</td>");
    document.writeln("</tr>");
    document.writeln("<tr valign=\"top\"> ");
    document.writeln("<td width=\"14%\">1</td>");
    document.writeln("<td width=\"11%\">-</td>");
    document.writeln("<td width=\"75%\">I shall act with immediate effect</td>");
    document.writeln("</tr>");
    document.writeln("<tr valign=\"top\"> ");
    document.writeln("<td width=\"14%\">2</td>");
    document.writeln("<td width=\"11%\">-</td>");
    document.writeln("<td width=\"75%\">I shall develop myself to do this in the near future </td>");
    document.writeln("</tr>");
    document.writeln("<tr valign=\"top\"> ");
    document.writeln("<td width=\"14%\">3</td>");
    document.writeln("<td width=\"11%\">-</td>");
    document.writeln("<td width=\"75%\">pending</td>");
    document.writeln("</tr>");
	document.writeln("</table>");
	document.writeln("</div>");
    document.writeln("</td>");
    document.writeln("</tr>");
	document.writeln("</table>\n");
	document.writeln("</td></tr>\n");
	for (row=0; row<TotalNoOfCategory; row++)
	{

    document.writeln("<tr><td>\n");
	document.writeln("<table width=\"100%\" align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n");
	document.writeln("<tr valign=\"top\">\n"); 
	document.writeln("<td bgcolor=\"" + first3rdColColor  + "\" width=\"" +  firstColWidth +"\"><i><b>" + Category[row] + "</b></i></td>\n");
	document.writeln("<td bgcolor=\"" + secondColColor + "\" rowspan=\"" + (QuestionCategory[row] + 1) + "\" width=\"" + secondColWidth + "\">\n");            
/*	
	if (navigator.appName == "Microsoft Internet Explorer")
	{  */
	document.writeln("<b><div align=\"left\"><span class=\"highlight\"><a href=\"javascript:;\" onClick=\"showHits(" + row + ")\";>why?</a></span></div></b><br>\n");
		document.writeln("<b><span ID =\"hit" + row + "\" class=\"hit\">\n");
		document.writeln(hits[row] + "\n");
		document.writeln("</span></b>\n");
/*	}
	else
	{

		document.writeln("<b><font color=\"#000000\"><blink>" + hits[row] + "</blink></font></b>\n");
	} */
	
	document.writeln("</td>\n");
	document.writeln("<td  bgcolor=\"" + first3rdColColor  + "\" width=\"" + thirdColWidth + "\">&nbsp;</td>\n");
	document.writeln("</tr>\n");

		for (i=0; i<QuestionCategory[row]; i++)
		{
		   
			 document.writeln("<tr valign=\"top\">\n"); 	
			 document.writeln("<td bgcolor=\"" + first3rdColColor  + "\" width=\"" + firstColWidth + "\">" + Question[counter] + "</td>\n");
			 document.writeln("<td bgcolor=\"" + first3rdColColor  + "\" width=\"" + thirdColWidth + "\">\n"); 
			 document.writeln("<table width=\"85%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n");
		/*	 document.writeln("<tr valign=\"top\" align=\"center\">\n");
			 for (j=0; j<TotalNoOfOptions; j++)
			 {
				 document.writeln("<td>" + optionValues[j] + "</td>\n");
			 } 
			 document.writeln("</tr>\n");     */
			 document.writeln("<tr valign=\"top\" align=\"center\">\n"); 
			for (k=1; k<=TotalNoOfOptions; k++)
			{
				document.writeln("<td>\n");
			// for radio button
			document.writeln(optionValues[k-1] + "<input type=\"radio\" name=\"checkbox" + counter + "\"  value=\"checkbox" + (k + Optioncounter) + "\" onClick=\"Result()\">\n");
			
			// for checkboxes
			//	document.writeln(optionValues[k-1] + "<input type=\"radio\" name=\"checkbox" + (K+ Optioncounter) + "\"  value=\"checkbox" + (k + Optioncounter) + "\">\n");
				document.writeln("</td>\n");
			}
			document.writeln("</tr>\n");
			document.writeln("</table>\n");
			document.writeln("</td>\n");
			document.writeln("</tr>\n");
		counter++;
		// for checkboxes use only
		//Optioncounter = Optioncounter + TotalNoOfOptions;
		}
/*		if (navigator.appName == "Microsoft Internet Explorer")
		{ */
	/*		document.writeln("<tr valign=\"top\">\n");       
			document.writeln("<td bgcolor=\"" + td_color + "\" width=\"" + firstColWidth + "\">\n");
			document.writeln("<b><div align=\"right\"><span class=\"highlight\"><a href=\"javascript:;\" onClick=\"showHits(" + row + ")\";>why?</a></span></div></b>\n");
			document.writeln("</td>\n");
			document.writeln("<td bgcolor=\"" + td_color + "\" width=\"" + thirdColWidth + "\">&nbsp;</td>\n");
			document.writeln("</tr>\n"); */
	/*	}	*/
		document.writeln("</table>\n");
		document.writeln("</td></tr>\n");
		

	}
	document.writeln("</table>\n");
	//document.writeln("</td></tr>\n");
	document.writeln("</table>\n");
}

//radio mode needs this function
function Result()
	{
		for (i=0; i<TotalNoOfQuestions; i++) 
		{
			for (j=0; j<TotalNoOfOptions; j++)
			{
				obj =eval("document.forms[0].checkbox" +(i)+ "[j]");
				if (obj.checked == true)
				{
					result[i] = obj.value;
					break;
				}
			}
		}
	}



function checkfillin_radiobuttonMode()
{
	
	var pass = true;
	
	for (i=0; i<result.length; i++)
	{
		if (result[i] == "" || result[i]==null)
		{	
			pass = false;
			alert("Please fill in all the questions first!");
			break;
		}
		
	}
	
	if (pass == true)
	{
		openSuggestionWindow();
	}
	
	return pass
}



 // function to check whether the student finish the task or not.
 function checkFillin_checkboxesMode()
 {
	 var counter = 0;
	 var questionFilled = false;
	  for (i=0; i<TotalNoOfQuestions; i++)
	  {
		  questionFilled = false;

		  for (j=1; j<=optionValues.length; j++)
		  {
			   
			   {
					
			   	   // for checkboxes function checking
				   obj = eval("document.forms[0].checkbox" +  (j + counter))
				   if (obj.checked == true)
				   {
					   questionFilled = true;
					   break;
				   }
				  
			   }
		  }

		  if (questionFilled == false)
		  {
			  alert("Please answer all the questions first!");
			  return false;
		  }
		  //for check box use only;
		  counter = counter + TotalNoOfOptions;

	  }

	  if (questionFilled == true)
	  {
		  openSuggestionWindow();
	  }
 }

				

// function to show teachers' think/suggested answer
function showHits(i)
{
	 
		  dom = eval(documentObj + '.' + 'hit' + i + styleObj);
		  state = dom.visibility;
 		  dom.visibility = "visible";

} 

function changeColor(i)
{
		 dom = eval(documentObj + '.' + 'hit' + i + styleObj);
		 dom.color = "red"		
}

	
// function to reset the html page
function resetPage()
{
	 for (i=0; i<hits.length; i++)
	  {
		  dom = eval(documentObj + '.' + 'hit' + i + styleObj);
		  state = dom.visibility;
 		  dom.visibility = "hidden";
		 		 
	  }
}