Menu
I am developing a script using HTML, CSS and Javascript that will allow:
1. A question to be displayed2. A place for a student to respond. I want to use special Greek characters to form some mathematical equations and have added an array of common characters for the student to click on and insert into the textarea of their response.
And finally,3. A display of the correct answer after the student response.
The draft script below accomplished all 3 of the above items in the Netscape and FireFox browsers. I can enter the special characters into the textarea and I get no errors in the ‘javascript:’ console area.
The script loads and reports no errors in the Internet Explorer browser, but it does not work when buttons are pressed to insert special characters for the Internet Explorer browser. Again, I have no error reported??? It just does nothing but stare back at me. I don’t know where to start to fix the problem, whatever the problem is!!!
Does anyone have any suggestions as to what to correct to make it work in all broswers? Any ideas on what to change since I am not getting any errors?
Thanks in advance.
[CODE]
<HTML>
<HEAD>
<META http-equiv=Content-Type content=”text/html; charset=iso-8859-1″>
<style type=”text/css”>
<!–
.para {font-family: “Verdana”,”Arial”,”sans-serif”; font-size:12pt;}
a.lnk {background-repeat:no-repeat;font-family:”Verdana”,”arial”,”sans-serif”;font-size:12px;}
input, textarea
{
color: green;
font-family: Verdana,Arial,Sans-serif;
font-size: 0.8em;
}
–>
</style>
<script type=”text/javascript”>
<!– Begin
var page = “”;
var btns = new Array(916,931,936,945,946,947,948,949,952,955,956,957,960,961,963,964,966,969);
var btnN = new Array(‘Delta’,’Sum’,’psi’,’alpha’,’beta’,’gamma’,’delta’,’epsilon’,’theta’,
‘lamda’,’mu’,’nu’,’eta’,’rho’,’sigma’,’tau’,’phi’,’omega’)
// Put the id’s of your hidden divs in this array
var Qsubs_array = new Array(“qsub1″,”qsub2”); // questions
var Rsubs_array = new Array(“rsub1″,”rsub2”); // responses
var Asubs_array = new Array(“asub1″,”asub2″); // answers
/* the following section is not used at this time
function displayQSubs(the_sub){
if (document.getElementById(the_sub).style.display==””){
document.getElementById(the_sub).style.display = “none”;return }
for (i=0;i<Qsubs_array.length;i++){
var my_sub = document.getElementById(Qsubs_array[i]);
my_sub.style.display = “none”; }
document.getElementById(the_sub).style.display = “”;
}
*/
function displayRSubs(the_sub){
if (document.getElementById(the_sub).style.display==””){
document.getElementById(the_sub).style.display = “none”;return }
for (i=0;i<Rsubs_array.length;i++){
var my_sub = document.getElementById(Rsubs_array[i]);
my_sub.style.display = “none”; }
document.getElementById(the_sub).style.display = “”;
}
function displayASubs(the_sub){
if (document.getElementById(the_sub).style.display==””){
document.getElementById(the_sub).style.display = “none”;return }
for (i=0;i<Asubs_array.length;i++){
var my_sub = document.getElementById(Asubs_array[i]);
my_sub.style.display = “none”; }
document.getElementById(the_sub).style.display = “”;
}
function InsertText(input,theText) {
if (typeof input.selectionStart != ‘undefined’) {
var start = input.selectionStart;
var end = input.selectionEnd;
input.value = input.value.substr(0,start) + theText + input.value.substr(end);
input.selectionStart = start + theText.length;
input.selectionEnd = start + theText.length;
input.focus();
}
}
// –>
</SCRIPT>
</HEAD>
<BODY>
<FORM name=faqform onSubmit=”javascript:void(0);return false”>
<div class=”para” id=”asub0″ style=”display:none”><textarea name=Ans0 cols=60 rows=8 readOnly>
Question #1
</textarea></div>
Question #1
<P>
<TABLE border=1 width=”100%”>
<TR>
<TD width=”25%” valign=”top”>
Solution: <P>
<div class=”para” id=”qsub1″>
<a href=”javascript:void(0)” class=”lnk” onClick=”displayRSubs(‘rsub1’)”>
Step #1?</a> </div>
<p>
<div class=”para” id=”qsub2″>
<a href=”javascript:void(0)” class=”lnk” onClick=”displayRSubs(‘rsub2’)”>
Step #2?</a> </div>
</TD>
<TD valign=”top”>
Student Response<P>
<div class=”para” id=”rsub1″ style=”display:none”>
<TEXTAREA name=student1 cols=60 rows=8 wrap=virtual>Student Response to Step #1</TEXTAREA>
<script language=”javascript”>
page = ”;
for (var i=0; i<btns.length; i++) {
if ((i % 6) == 0) { page += ‘<br>’; }
page += “<button onClick=”InsertText(student1,’&#”;
page += btns[i]+”;’)”>&#”+btns[i]+”; (“+btnN[i]+”)</button>n”;
}
page += “<br>”;
page += “<button onClick=”InsertText(student1,'<sub>’)”><sub></button>”;
page += “<button onClick=”InsertText(student1,'</sub>’)”></sub></button>”;
page += “<button onClick=”InsertText(student1,'<sup>’)”><sup></button>”;
page += “<button onClick=”InsertText(student1,'</sup>’)”></sup></button>”;
page += “<button onClick=”InsertText(student1,’¹/’)”>¹/</button>”;
document.writeln(page);
</script>
</div>
<div class=”para” id=”rsub2″ style=”display:none”>
<TEXTAREA name=student2 cols=60 rows=8 wrap=virtual>
Step #2
Student Response</TEXTAREA>
<script language=”javascript”>
page = ”;
for (var i=0; i<btns.length; i++) {
if ((i % 6) == 0) { page += ‘<br>’; }
page += “<button onClick=”InsertText(student2,’&#”;
page += btns[i]+”;’)”>&#”+btns[i]+”; (“+btnN[i]+”)</button>n”;
}
page += “<br>”;
page += “<button onClick=”InsertText(student2,'<sub>’)”><sub></button>”;
page += “<button onClick=”InsertText(student2,'</sub>’)”></sub></button>”;
page += “<button onClick=”InsertText(student2,'<sup>’)”><sup></button>”;
page += “<button onClick=”InsertText(student2,'</sup>’)”></sup></button>”;
page += “<button onClick=”InsertText(student2,’¹/’)”>¹/</button>”;
document.writeln(page);
</script>
</div>
</TD></TR>
<TR><TD>
Answer:<br>
<a href=”javascript:void(0)” class=”lnk” onClick=”displayASubs(‘asub1’)”> Step 1?</a>
<p>
<a href=”javascript:void(0)” class=”lnk” onClick=”displayASubs(‘asub2’)”> Step 2?</a>
</TD><TD>
<div class=”para” id=”asub1″ style=”display:none”>
<textarea name=Ans1 cols=60 rows=8 readOnly>
Correct Answer Step #1</textarea>
</div>
<div class=”para” id=”asub2″ style=”display:none”>
<textarea name=Ans2 cols=60 rows=8 readOnly>
Correct Answer
Step #2
</textarea>
</div>
</TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>