Jump to content

Functionality changes when HTML uploaded.


draig_hand

Recommended Posts

Hello again all.

 

I have a page which has javascript driving image changes and retrieving data from JS files. The page was created using Dreamweaver.

 

The functionality when tested on my local site (desktop pc) works fine but when uploaded it behaves differently.

 

Has anyone experienced this sort of thing before and know why it is happening?

 

I can post the code later if anyone thinks it's because of the way my code is written.

 

Thanks

Link to comment
Share on other sites

Hi,

 

Please post the Javascript code where the Data is held and any other Javascript codes. Also could you please specify exactly how it's behaving online, what's going wrong etc and please be specific as possible. "Behaving Differently" is not a very specific problem, so I can't really give you a specific solution. :P

Link to comment
Share on other sites

Hello BeeDev,

 

Hope I can explain what I'm seeing clearly enough. The HTML code is below this message. A copy of the contents of one of the JS files is at the bottom.

 

Following the first ever roll of the dice the result (d1 and d2) identify the Javascript file that will provide the Q&A by modifying " " (i.e. changing the "11" to whatever d1,d2 result is).

 

This works well locally. I can view the result of dice roll and confirm q&a are coming from the required JS file.

 

When uploaded however the first roll dice result is ignored and the question is derived from "11.js".

 

The program/script seems to be looking back to the previous roll result and not at the current role result.

 

I have tried to tidy up my code a bit and have input notes to help me navigate through it, so hopefully it won't be too much of a mire for you to wade through.

 

Thanks for your help.

 

>
br />"http://www.w3.org/TR/html4/loose.dtd">



Project Management Quiz






























</pre>
<table width="74%" border="0">
The Training Game

A game for aspiring and experienced trade and professional personnel - and the insatiably curious.

By Abbermist Limited. Programme Office Specialists. Established 08/11/1985








Choose: 
----
a
b
c
d

Answer: 


Correct: 
Incorrect: 
Success Rate: 

Cheat Mode








Choose a Topic

Project Management

General Knowledge

       Electrical

       Mechanical

       Marine

       HVAC

       other
Choose a Project

House


        Personal Computer

        Rocket

        Aircraft

        Oil Rig

        Ship


GAME SCOPE



Your objective is to complete the project in as few rolls as possible.

Left die determines the subject, right die determines the level of difficulty.

From Level 1 (Easy) to Level 6 (Hard) , successfully answering the question presented will move the build on a proportionate amount.   

map history copyright mission guest site us overcome prepare plan cost doc change issue risk POF





   





Project Progress 







Visitor number 



Questions set by: ABBERMIST Game area graphics by:
PJP

Program by: PJP 


MORE GAMES    

Copyright Abbermist Limted 2009
</table>
<br><table width="73%" border="1">
YOUR LOGO HEREYOUR LOGO HEREYOUR LOGO HEREYOUR LOGO HEREYOUR LOGO HEREYOUR LOGO HEREYOUR LOGO HERE</table>
<br><br><br><br><br><br><br

 

 

JAVASCRIPT FILE quizpm/11.js contents

var total=5
var question=new Array()
for (i=1;i<=total+1;i++){
temp="choice"+i+"=new Array()"
eval(temp)
}
var solution=new Array()

/*QUIZPM 11 Below lists the questions, its choices, and finally, the solution to each question.
*/

question[1]="Which of the following statements is NOT TRUE about the text within a Plan?"
choice1[1]="Words are useful as well as pictures."
choice1[2]="A Plan is not complete without explanatory text and justification."
choice1[3]="Constraints within the Plan should be documented."
choice1[4]="Narrative text is always waffle."
question[2]="Which of the following should not be part of the Project Plan?"
choice2[1]="The resources and time needed for all relevant activities (including project management and control) and any need for people with specific skills."
choice2[2]="When activities will occur."
choice2[3]="Agreed tolerances."
choice2[4]="Risk Log."
question[3]="The document that captures the why, what, where, when, how, how much and who for the project is called:"
choice3[1]="Project schedule."
choice3[2]="Project definition and delivery report."
choice3[3]="End of feasibility report."
choice3[4]="Project management plan."
question[4]="Which of these processes does NOT trigger the Planning (PL) process?"
choice4[1]="Starting Up a Project (SU)."
choice4[2]="Initiating a Project (IP)."
choice4[3]="Managing Stage Boundaries (SB)."
choice4[4]="Directing a Project (DP)."
question[5]="Which of the following is not used in the quality control process?"
choice5[1]="Gantt charts."
choice5[2]="Control charts."
choice5[3]="Pareto charts."
choice5[4]="Statistical sampling."

solution[1]="d"
solution[2]="d"
solution[3]="d"
solution[4]="d"
solution[5]="a"

Link to comment
Share on other sites

I just copied your HTML and 11.js into my local computer and ran the page.

 

The page generated the numbers and put the question in there, however my debugger showed one javascript error:

 

document.scripts is not a function

 

which is referring to the following line:

document.scripts('script1').src='quizpm/'+d1+''+d2+'.js';

 

 

I don't exactly know what's going on in there, and how this game works, I have to spend lot more time to figure it out. So I'll direct you in the right direction :D

 

For debugging huge scripts like this, you need a javascript debugger. Best one around is "FireBug" for Firefox. Just install it and enable console logger for Scripts. You might also want to put some missing semi-colons in 11.js and other bits of the script as it's always a good practice.

Link to comment
Share on other sites

You seem to have hit on the crux of the matter.

 

The success of what I am trying to do revolves around my being able to have the program change the Q&A JS file it refers to whenever a dice roll is completed.

 

That is what - document.scripts('script1').src='quizpm/'+d1+''+d2+'.js'; is supposed to do. That is to change the "11" in

 

It was the only solution I could find and until now was completely satisfied with it. Unfortunately I think its shortcomings are being shown up when placed on the server.

 

Would you know how to change this into a function?

 

Thanks for pointing out the javascript debuggers' (apropriate surname that :) ). I looked at the IE developer debugger I already have and found I couldn''t understand what it was trying to do for me, or if indeed it was working at all. :P

 

I'll look into Firebug next.

 

Thanks for taking the time to help me.

Link to comment
Share on other sites

Yes I understand what that line does.

 

And I know IE Debugger can be as good as IE itself - shite. FireBug is the best javascript debugger ;)

 

Can't you name your answer & question arrays with the dice numbers, and then put them all in one script file?

 

For example:

 

question11

question51

question12... etc

 

And you can include them in your script like so:

 

var q1 = eval('question'+d1+d2+'[0]');
var a1 = eval('answer'+d1+d2+'[0]');
var a2 = eval('answer'+d1+d2+'[1]');
var a3 = eval('answer'+d1+d2+'[2]');
var a4 = eval('answer'+d1+d2+'[3]');

 

like you've already done so in some parts of your script.

 

Also you can also consolidate all your arrays into one. Your basic structure is: question, 4 possible answers, correct answer.

 

So you structure arrays like so:

 

var quiz11 = new Array();

quiz11[0] = new Array(2);
quiz11[0][0] = "Which of the following statements is NOT TRUE about the text within a Plan?";
quiz11[0][1] = "Words are useful as well as pictures.*A Plan is not complete without explanatory text and justification.*Constraints within the Plan should be documented.*Narrative text is always waffle.*d";
quiz11[1] = new Array(2);
quiz11[1][0] = .....
quiz11[1][1] = .....

 

You see above I put the question into the first part of the two dimension array. The second part has ALL the answers AND the correct answer in the end, separated by an asterisk *

 

When you're reading the answers, you can just separate them using the asterisk:

 

var temp = quiz11[0][1];
var tempArray = new Array();
tempArray = temp.split("*");

 

So after that process, tempArray will have all your answers, as well as the correct answer. tempArray[0] has the first possible answer, tempArray[1] has the next one and so on. tempArray[4] will have the correct answer information.

 

You can improve even further by declaring your quiz11 and quiz12 quiz13 .... quiz66 arrays using a loop.

 

More info on string.split here:

 

http://www.tizag.com/javascriptT/javascript-string-split.php

 

More info on multi-dimensional arrays here:

 

http://www.exforsys.com/tutorials/javascript/javascript-two-dimensional-arrays.html

 

Good luck.

Edited by BeeDev
Link to comment
Share on other sites

  • 1 month later...

Hello again BeeDev,

 

Back from holiday - seems a long time ago already.

 

I have created a quiz that works on my local PC but when uploded to web server behaves very strangely. (Code at botom of this message)

 

My problem is that from the web server the quiz JS file presented is incorrect and the question presented is from anothjer JS file entirely

 

I placed alerts to indicate wether or not the correct script is being called and the correct question number presented.

 

This works locally of course, but now the strange thing - when on web server the alerts show that the JS file and question are in fact correct! Indeed the quiz can be said to be working as desired if not for the alerts popping up.

However when I remove the alerts from the page on the server the page goes back to presenting the wrong JS and question!

 

Why would alerts cause the page to operate correctly and no alerts not?

 

FYI:- I ran the code through the 'W3C Markup Validation Service' and it returned only one error -

"

Validation Output: 1 Error

Line 91, Column 53: Attribute "ID" is not a valid attribute. Did you mean "id"?

?="javascript" src='quizgk/11.js' Id='script1' type="text/javascript">?

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element.

"

 

I have spent days trying to find another way to identify the script so that my program can call the next script. Can you help?

 


Link to comment
Share on other sites

Hello SharWeb,

 

Unfortunately solution not fine for me.

 

My real sticking point right now is that the quiz which works on my PC does not work when run from a web server!

 

I believe it may be due to the fact that a web server takes more (or less?) time to run the code than my PC and the program is getting itself confused. Putting alerts in and then seeing the program present everything correctly seems to prove that.

 

Does anyone know what I can do to the code that simulates the effect of the alerts?

 

Thanks.

Link to comment
Share on other sites

I can see the javascript file with id script1 changing as you roll the dice.

 

However, it seems the browser caches the Javascript file 11.js and doesn't really get the values from the replaced js file.

 

This is probably a browser Security setting, and there's not much you can do about that.

 

The best solution would be to structure all your questions into one big file, OR perhaps an Access Database, or maybe even an XML file, as your current solution to change the Javascript file is not really web-friendly.

 

I *think* that it works locally because the browser's security setting allows you to dynamically change Javascript files on the local INTRANET websites.

 

Can anyone confirm this? :|

Edited by BeeDev
Link to comment
Share on other sites

I've just tested your page on Internet Explorer 8, and it definetely loads the correct JS file and provides the correct Question and choices. Your problem only seems to affect Mozilla based browsers, as mentioned on link on the above post.

 

So you're almost there mate, just need to tweak the script so that it *deletes* the

 

Let me know what happens then.

 

All the best,

 

Bee.

Link to comment
Share on other sites

Reading the link provided I felt I was nearing the end of the saga too so I copied the suggeted solution:-

 

on action {loaded()} 

 

 

However, try as I might I cannot seem to fit this into my code and make it work :rolleyes:

I'm sure it's due to my ignorance. e.g. the first line of given code is "on action {loaded()}" - I don't know where this would fit. It seems to be hanging there independant of the rest of the code!? Also the convention

Link to comment
Share on other sites

That function is useless to you. And that on action {loaded()} is not a piece of code. It's just saying to call loaded() function on some action. like: Loaded()

 

So now only one of your functions should change. Remember, that instead of changing source of the script element, we're trying to delete and create a new script element instead. So only your showdice() function will change from:

 

function showdice()
{
   d1=Math.floor(Math.random()*6+1);
   document.images['d1'].src='images/functiondicegk'+d1+'.gif';
   d2=Math.floor(Math.random()*6+1);
   document.images['d2'].src='images/diffdice'+d2+'.gif';


   document.getElementById('script1').src='quizgk/'+d1+''+d2+'.js';



   dq=(Math.floor(Math.random()*5+1));

   generatequestions();
}

 

to (Not Tested or debugged):

 

function showdice()
{
   d1=Math.floor(Math.random()*6+1);
   document.images['d1'].src='images/functiondicegk'+d1+'.gif';
   d2=Math.floor(Math.random()*6+1);
   document.images['d2'].src='images/diffdice'+d2+'.gif';

   //remove the old script
   var removeElement = document.getElementById('script1');
   removeElement.parentNode.removeChild(removeElement);

   //create the new script and append it to the head
   newElement = document.createElement("script"); 
   newElement.src = 'quizgk/'+d1+''+d2+'.js';
   newElement.type = "text/javascript"; 
   newElement.id = "script1"; 
   document.getElementsByTagName("head")[0].appendChild(newElement); 

   dq=(Math.floor(Math.random()*5+1));

   generatequestions();
}

Link to comment
Share on other sites

I replaced the existing code with the code you supplied.

 

Locally the functionality is unaffected i.e. it works. Unfortunately I'm still seeing the same problems when running from the web server!

 

Observation: (NB - the 'quizform' form contains 'thequestion', 'theresponse' and 'thesolution'.)

When rolldice function completes the "theresponse" and the "thesolution" parts of the form are returning the correct details. It is only "thequestion" that does not correspond with the rolldice result!

Is it possible that the 'generatequestions' function is to blame?

 

To see on server look for abbermist.co.uk/quizGK%20w3c%20NEWEST.html

Link to comment
Share on other sites

Try splitting out the dice rolling, the image changing, and script source changing, and question generating functions to each of their own functions.

 

At the moment, the script's source changes at least 5-6 times after u click "Roll Dice" and it's not very efficient. Also while the script's source is changing the function generate_questions() is also being called again 5-6 times. Try to think of a better way to do it.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...