www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: innerHTML

  1. #1
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167

    innerHTML

    Code:
    <script type="text/javascript">
    var quiz = new Array(); var r = 0;
    var analPage = 'virtual';
    quiz[r++] =('The importance of this course to me is...~high. I need it now for certification or my job.~moderate. I could take it when it is eventually offered as a face-to-face course.~	low. It\'s only for my own personal development and could be done later.~');
    quiz[r++] =('Feeling that I am part of a class is...~not really a necessity for me.~somewhat important to me.~extremely important to me.~');
    quiz[r++] =('When completing my assignments, I...~often get things done ahead of schedule.~get things done on time but not without reminding.~puts things off until the very last minute.~');
    quiz[r++] =('Classroom discussions are...~rarely helpful to me.~sometimes helpful to me.~very helpful to me.~');
    quiz[r++] =('When an instructor gives an assignment, I would rather...~figure out how I want to approach it by myself.~try to follow the directions on my own, then ask for help if I need it.~have the instructor explain it to me.~');
    quiz[r++] =('I need instructor comments on my assignments...~immediately, or I get frustrated that I\'m not learning.~within a few days, or I forget what I did.~within a few weeks, so I can review what I did.~');
    quiz[r++] =('Considering my work and personal schedule, the amount of time I have to work on this course is...~more than enough for a campus class.~the same as for taking a class on campus.~less than for taking a class on campus.~');
    quiz[r++] =('When I am asked to use VCRs, computers, voice mail, or other technologies that may be new to me...~I get excited about an opportunity to learn a new skill.~I feel nervous but am willing to try.~I put it off, try to avoid it, or get someone else to do it for me.~');
    quiz[r++] =('As a reader, I would consider myself...~a good reader.  I usually understand what I read without help.~an average reader.  I sometimes need help to understand what I read.~a slower than average reader.  It takes me a long time to read and understand.~');
    quiz[r++] =('When I am asked to communicate in writing, I...~am confident in my ability to ability to express my thoughts and ideas in writing.~hesitate because I am not sure if the reader will properly understand the message that I am trying to convey.~do not communicate well in writing. I prefer verbal communication.~');
    quiz[r++] =('There is a quiet place at home or work that is free from distractions and near a computer that I can use for extended periods of time to study and work on assignments:~I have access to a quiet place to study and work on assignments that is free from distraction.~Sometimes, I might not have access to a quiet place to study and work on assignments.~I do not have access to a quiet place to study and work on assignments.~');
    </script>
    <script type="text/javascript">
    // Quiz Javascript
    // copyright 2nd February 2006, by Stephen Chapman
    // permission to use this Javascript on your web page is granted
    // provided that all of the code in this script (including these
    // comments) is used without any alteration
    
    // percentages for page splits
    var one = 50; var two = 75; var three = 87;
    
    function randOrd(){return(Math.round(Math.random())-0.5); }
    function displayResult(aa,bb,cc,dd) {var tot = aa + bb + cc + dd; aa = Math.floor(aa * 100 / tot); bb = Math.floor(bb * 100 / tot); cc = Math.floor(cc * 100 / tot); dd = Math.floor(dd * 100 / tot); if (aa > one) analPage = analPage + 'a.shtm'; else if (bb > one) analPage = analPage + 'b.shtm'; else if (cc > one) analPage = analPage + 'c.shtm'; else if (dd > one) analPage = analPage + 'd.shtm'; else if (aa + bb > two) analPage = analPage + 'ab.shtm'; else if (aa + cc > two) analPage = analPage + 'ac.shtm'; else if (aa + dd > two) analPage = analPage + 'ad.shtm'; else if (bb + cc > two) analPage = analPage + 'bc.shtm'; else if (bb + dd > two) analPage = analPage + 'bd.shtm'; else if (cc + dd > two) analPage = analPage + 'cd.shtm'; else if (aa < 100 - three) analPage = analPage + 'bcd.shtm'; else if (bb < 100 - three) analPage = analPage + 'acd.shtm'; else if (cc < 100 - three) analPage = analPage + 'abd.shtm'; else if (dd < 100 - three) analPage = analPage + 'abc.shtm'; else analPage = analPage + 'abcd.shtm'; document.write('<p>You have completed the quiz.</p><p><a href="'+analPage+'">Your result</a><\/p>');}
    var qsParm = new Array(); function qs() {var query = window.location.search.substring(1); var parms = query.split('&'); for (var i=0; i<parms.length; i++) {var pos = parms[i].indexOf('='); if (pos > 0) { var key = parms[i].substring(0,pos); var val = parms[i].substring(pos+1); qsParm[key] = val;}}} qsParm['questnum'] = 0; qsParm['aa'] = 0; qsParm['bb'] = 0; qsParm['cc'] = 0; qsParm['dd'] = 0; qs(); var questnum = qsParm['questnum']; var aa = qsParm['aa'];aa=aa%475; var bb = qsParm['bb'];bb=bb%475; var cc = qsParm['cc'];cc=cc%475; var dd = qsParm['dd'];dd=dd%475;
    function checkAnswer(e,x){var a = -1; for (var i=0; i<e.c.length; i++) {if (e.c[i].checked) {a = i;}} if (a == -1) {alert("You must select an answer"); return false;} switch(e.c[a].value) {case '0': aa++; break; case '1': bb++; break; case '2': cc++; break; case '3': dd++; break;} var www = self.location.href.lastIndexOf('?'); var thispage = self.location.href; if (www != -1) thispage = self.location.href.substr(0,www); questnum++; var p = Math.floor((Math.random() * 8) + 2); aa = (p * 475) +aa; p = Math.floor((Math.random() * 8) + 2); bb = (p * 475) +bb; p = Math.floor((Math.random() * 8) + 2); cc = (p * 475) +cc; p = Math.floor((Math.random() * 8) + 2); dd = (p * 475) +dd; top.location = thispage + '?questnum='+ questnum +'&aa='+aa+'&bb='+bb+'&cc='+cc+'&dd='+dd; return false;}
    var tblsz = quiz.length; 
    //document.write('<div id="quiz">'); 
    if (questnum < quiz.length) 
    {var f = quiz[questnum].split('~');
    
    var ans = [];
    document.write('<form name="myForm" id="virtual101"><p><strong>Question:</strong> '+f[0]+'</p><ul>'); 
    ans[0] = '<li><input type="radio" name="c" value="0" \/> '+f[1]+'<\/li>'; 
    ans[1] = '<li><input type="radio" name="c" value="1" \/> '+f[2]+'<\/li>'; if (f[3] != '') 
    ans[2] = '<li><input type="radio" name="c" value="2" \/> '+f[3]+'<\/li>'; if (f[4] != '') 
    ans[3] = '<li><input type="radio" name="c" value="3" \/> '+f[4]+'<\/li>'; 
    ans.sort( randOrd ); document.write(ans.join('')); 
    document.write('</ul><input type="button" value="Next Question" id="next" onclick="checkAnswer(myForm,0);return false;" \/></form>\n');} 
    else {
    document.write('\n'); document.write('<form name="myForm">'); displayResult(aa,bb,cc,dd); document.write('<\/form>\n');} document.write('\n');
    </script>
    I have this code - how do I indicate that this should go in a specific div named "text"? I've tried some innerHTML syntax, but just can't get it right.
    Thanks -
    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  2. #2
    Join Date
    Feb 2008
    Posts
    1,666
    document.write() only works at the window level and on an entire document basis. Thus, for a DIV, you must build an HTML string and then plug it into the DIV using innerHTML:

    document.getElementById("divID").innerHTML = htmlString;

  3. #3
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Quote Originally Posted by MrNobody View Post
    document.write() only works at the window level and on an entire document basis. Thus, for a DIV, you must build an HTML string and then plug it into the DIV using innerHTML:

    document.getElementById("divID").innerHTML = htmlString;
    Yep, you're exactly right. I tried that method, but can't get the syntax correct:
    Code:
    ...
    var ans = [];
    ans[0] = '<li><input type="radio" name="c" value="0" \/> '+f[1]+'<\/li>'; 
    ans[1] = '<li><input type="radio" name="c" value="1" \/> '+f[2]+'<\/li>'; if (f[3] != '') 
    ans[2] = '<li><input type="radio" name="c" value="2" \/> '+f[3]+'<\/li>'; if (f[4] != '') 
    ans[3] = '<li><input type="radio" name="c" value="3" \/> '+f[4]+'<\/li>'; 
    ans.sort( randOrd ); document.write(ans.join('')); 
    
    document.getElementById('text').innerHTML = stuff
    
    var stuff = 
    "<form name='myForm' id='virtual101'><p><strong>Question:</strong> '+f[0]+'</p><ul>'" + ans +  
    "</ul><input type='button' value='Next Question' id='next' onclick='checkAnswer(myForm,0);return false;' \/></form>\n')" 
    //else {
    //document.write('\n'); document.write('<form name="myForm">'); displayResult(aa,bb,cc,dd); document.write('<\/form>\n');} document.write('\n');
    Consult previous post for original coding - I know I've screwed this up
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  4. #4
    Join Date
    Feb 2008
    Posts
    1,666
    This part:
    Code:
    var ans = [];
    document.write('<form name="myForm" id="virtual101"><p><strong>Question:</strong> '+f[0]+'</p><ul>'); 
    ans[0] = '<li><input type="radio" name="c" value="0" \/> '+f[1]+'<\/li>'; 
    ans[1] = '<li><input type="radio" name="c" value="1" \/> '+f[2]+'<\/li>'; if (f[3] != '') 
    ans[2] = '<li><input type="radio" name="c" value="2" \/> '+f[3]+'<\/li>'; if (f[4] != '') 
    ans[3] = '<li><input type="radio" name="c" value="3" \/> '+f[4]+'<\/li>'; 
    ans.sort( randOrd ); document.write(ans.join('')); 
    document.write('</ul><input type="button" value="Next Question" id="next" onclick="checkAnswer(myForm,0);return false;" \/></form>\n');} 
    else {
    document.write('\n'); document.write('<form name="myForm">'); displayResult(aa,bb,cc,dd); document.write('<\/form>\n');} document.write('\n');
    needs to be like this:
    Code:
    var ans = [];
    var htmlString = '<form name="myForm" id="virtual101"><p><strong>Question:</strong> '+f[0]+'</p><ul>';
    ans[0] = '<li><input type="radio" name="c" value="0" \/> '+f[1]+'<\/li>'; 
    ans[1] = '<li><input type="radio" name="c" value="1" \/> '+f[2]+'<\/li>'; if (f[3] != '') 
    ans[2] = '<li><input type="radio" name="c" value="2" \/> '+f[3]+'<\/li>'; if (f[4] != '') 
    ans[3] = '<li><input type="radio" name="c" value="3" \/> '+f[4]+'<\/li>'; 
    ans.sort( randOrd );
    htmlString += ans.join('');
    htmlString += '</ul><input type="button" value="Next Question" id="next" onclick="checkAnswer(myForm,0);return false;" \/></form>\n';
    } 
    else {
    htmlString += '\n';
    htmlString += '<form name="myForm">';
    displayResult(aa,bb,cc,dd);
    htmlString += '<\/form>\n');
    }
    htmlString += '\n';
    
    document.getElementById('text').innerHTML = htmlString;
    However, that displayResult() function isn't going to work as is.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Question

    How locked in to this version of the quiz?
    I have some ideas but I can't get by this:
    <script type="text/javascript">
    // Quiz Javascript
    // copyright 2nd February 2006, by Stephen Chapman
    // permission to use this Javascript on your web page is granted
    // provided that all of the code in this script (including these
    // comments) is used without any alteration
    Are the quiz questions yours or his?

  6. #6
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Questions are mine, code is his.

    I'm not married to this -- I stink at JS and was looking for resources.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259
    Well then, here's a more simplified structure to start with. Obviously not finished yet ...
    Are there any "correct" answers or are you just trying to record the responses?
    PHP Code:
    <html>
    <
    head>
    <
    title>Quiz</title>
    <
    style type="text/css">
      
    ul { list-style:none; }
    </
    style>

    <
    script type="text/javascript">
    var 
    quiz = [ 
      
    'The importance of this course to me is...~high. I need it now for certification or my job.~moderate. I could take it when it is eventually offered as a face-to-face course.~low. It\'s only for my own personal development and could be done later.~',
      
    'Feeling that I am part of a class is...~not really a necessity for me.~somewhat important to me.~extremely important to me.~',
      
    'When completing my assignments, I...~often get things done ahead of schedule.~get things done on time but not without reminding.~puts things off until the very last minute.~',
      
    'Classroom discussions are...~rarely helpful to me.~sometimes helpful to me.~very helpful to me.~',
      
    'When an instructor gives an assignment, I would rather...~figure out how I want to approach it by myself.~try to follow the directions on my own, then ask for help if I need it.~have the instructor explain it to me.~',
      
    'I need instructor comments on my assignments...~immediately, or I get frustrated that I\'m not learning.~within a few days, or I forget what I did.~within a few weeks, so I can review what I did.~',
      
    'Considering my work and personal schedule, the amount of time I have to work on this course is...~more than enough for a campus class.~the same as for taking a class on campus.~less than for taking a class on campus.~',
      
    'When I am asked to use VCRs, computers, voice mail, or other technologies that may be new to me...~I get excited about an opportunity to learn a new skill.~I feel nervous but am willing to try.~I put it off, try to avoid it, or get someone else to do it for me.~',
      
    'As a reader, I would consider myself...~a good reader.  I usually understand what I read without help.~an average reader.  I sometimes need help to understand what I read.~a slower than average reader.  It takes me a long time to read and understand.~',
      
    'When I am asked to communicate in writing, I...~am confident in my ability to ability to express my thoughts and ideas in writing.~hesitate because I am not sure if the reader will properly understand the message that I am trying to convey.~do not communicate well in writing. I prefer verbal communication.~',
      
    'There is a quiet place at home or work that is free from distractions and near a computer that I can use for extended periods of time to study and work on assignments:~I have access to a quiet place to study and work on assignments that is free from distraction.~Sometimes, I might not have access to a quiet place to study and work on assignments.~I do not have access to a quiet place to study and work on assignments.~'
    ];
    function 
    ShowQuiz() {
      var 
    str '';
      var 
    info = [];
      for (
    i=0i<quiz.lengthi++) {
        
    info quiz[i].split('~');
        
    str += '<div id="q'+i+'">'+info[0]+'<ul>';
        for (
    j=1j<info.length-1j++) {
          
    str += '<ul><input type="radio" name="r'+i+'" value="'+j+'">';
          
    str += info[j]+'';
          
    str += '</ul>'
        }
        
    str += '</ul><p>';
      }
      
    document.write(str);
    }
    </script>
    </head>
    <body onload="ShowQuiz()">

    </body>
    </html> 
    Do you want to go on from here or do you want more help? Just trying to find your level of involvement.

  8. #8
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    It's based upon input values, where certain answers elicit more "points" than others, and then the points are tallied to put the viewer in a certain category.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Question More questions ...

    How are the points assigned. In the example given, first response of first item gives values of '1', second is '2' and third is '3'. Are there more weights to certain answers or more points assigned to certain items?
    How is the final score formed: Average of all 1-2-3 responses for all items? Histogram of items and answer level counts? What is output of responses suppose to look like?

    Sorry for so many questions but my ability read minds has deteriorated with age!

  10. #10
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    In the original code, the answers were always given in 3, 2, 1 order - the rendering on the page (through the js) is what randomized them so the viewer couldn't figure out the pattern and then keep choosing, say, the first answer to always get a "3." So, the order in the original code is correct.
    Code:
    //the question
    'The importance of this course to me is...
    //the 3 answer
    ~high. I need it now for certification or my job.
    //the 2 answer
    ~moderate. I could take it when it is eventually offered as a face-to-face course.
    //the 1 answer
    ~	low. It\'s only for my own personal development and could be done later.~');
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Talking Consider this ...

    Comment on this version ...
    PHP Code:
    <html>
    <
    head>
    <
    title>Quiz</title>
    <
    style type="text/css">
      
    ul { list-style:none; }
    </
    style>

    <
    script type="text/javascript">
    var 
    quiz = [ 
      
    'The importance of this course to me is...~high. I need it now for certification or my job.~moderate. I could take it when it is eventually offered as a face-to-face course.~low. It\'s only for my own personal development and could be done later.~',
      
    'Feeling that I am part of a class is...~not really a necessity for me.~somewhat important to me.~extremely important to me.~',
      
    'When completing my assignments, I...~often get things done ahead of schedule.~get things done on time but not without reminding.~puts things off until the very last minute.~',
      
    'Classroom discussions are...~rarely helpful to me.~sometimes helpful to me.~very helpful to me.~',
      
    'When an instructor gives an assignment, I would rather...~figure out how I want to approach it by myself.~try to follow the directions on my own, then ask for help if I need it.~have the instructor explain it to me.~',
      
    'I need instructor comments on my assignments...~immediately, or I get frustrated that I\'m not learning.~within a few days, or I forget what I did.~within a few weeks, so I can review what I did.~',
      
    'Considering my work and personal schedule, the amount of time I have to work on this course is...~more than enough for a campus class.~the same as for taking a class on campus.~less than for taking a class on campus.~',
      
    'When I am asked to use VCRs, computers, voice mail, or other technologies that may be new to me...~I get excited about an opportunity to learn a new skill.~I feel nervous but am willing to try.~I put it off, try to avoid it, or get someone else to do it for me.~',
      
    'As a reader, I would consider myself...~a good reader.  I usually understand what I read without help.~an average reader.  I sometimes need help to understand what I read.~a slower than average reader.  It takes me a long time to read and understand.~',
      
    'When I am asked to communicate in writing, I...~am confident in my ability to ability to express my thoughts and ideas in writing.~hesitate because I am not sure if the reader will properly understand the message that I am trying to convey.~do not communicate well in writing. I prefer verbal communication.~',
      
    'There is a quiet place at home or work that is free from distractions and near a computer that I can use for extended periods of time to study and work on assignments:~I have access to a quiet place to study and work on assignments that is free from distraction.~Sometimes, I might not have access to a quiet place to study and work on assignments.~I do not have access to a quiet place to study and work on assignments.~'
    ];

    function 
    randOrd() {
      return (
    Math.round(Math.random())-0.5);
    }

    function 
    ShowQuiz() {  // create quiz display
      
    var str '';  var tmp '';
      var 
    info = [];
      for (
    i=0i<quiz.lengthi++) {
        
    info quiz[i].split('~');
        
    str += '<div id="q'+i+'">'+info[0]+'<ul>';
        var 
    responses = [];
        for (
    j=1j<info.length-1j++) {  // form responses
          
    tmp '<input type="radio" name="r'+i+'" value="'+(4-j)+'">';
          
    tmp += info[j]+'<br>';
          
    responses.push(tmp);
        }
        
    responses.sort(randOrd);  // randomize display order
        
    for (j=0j<responses.lengthj++) { str += responses[j]; }
        
    str += '</ul><p>';
      }
      
    document.write(str);
    }

    function 
    getRBtnName(GrpName) {
      var 
    sel document.getElementsByName(GrpName);
      var 
    fnd = -1;
      var 
    str '';
      for (var 
    i=0i<sel.lengthi++) {
        if (
    sel[i].checked == true) { str sel[i].value;  fnd i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
      
    return str;


    function 
    ShowResults() {
      var 
    sum 0;    var cnt 0;
      var 
    item '';  var resp '';
      for (
    i=0i<quiz.lengthi++) {
        
    resp 'r'+i;
        
    item getRBtnName(resp);
        if (
    item != '') { sum += parseInt(item);  cnt++; } 
      }
      if (
    cnt != 0) {  // replace with display desired
        
    alert('Sum: '+sum+' for '+cnt+' entries\nAverage: '+(sum/cnt).toFixed(2));
      }
    }
    </script>
    </head>
    <body>
    <script type="text/javascript">
     ShowQuiz()
    </script>
    <button onclick="ShowResults()">Results of answers</button>
    </body>
    </html> 

  12. #12
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Cool - I'll try it in a few. I'm in the midst of another project at the moment.
    Wow and Thanks!
    Will respond once free - KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  13. #13
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    It's very close. It's displaying
    Sum: 21 for 11 entries
    Average: 1.91
    I don't need the average, only the total. Then, for the total to trigger a certain message to appear in a div named "text."
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  14. #14
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259
    That was provided for here:
    PHP Code:
      if (cnt != 0) {  // replace with display desired
        
    alert('Sum: '+sum+' for '+cnt+' entries\nAverage: '+(sum/cnt).toFixed(2));
      } 
    Change as needed.

  15. #15
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    That is the one out of my main three quiz scripts that I haven't yet found time to rewrite to get rid of the document.write statements. The other two types of quiz script both have versions that use DOM calls to update the page directly. I really should add rewriting that one to my priority list since that three year old code is really horrible looking now.

    I hope you manage to get a version working that does what you require without those messy document.write statements.
    Stephen

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles