Dynamic JSON project not loading images when published to server

Hi,

I have a hype project that loads images and text using JSON but the images wont appear for me when hosted on the server. All works fine in preview mode locally???

I assume that it is a simple image link issue or my hosted hype files are in the wrong location on server.

Any Help would be greatly appreciated. Stephen.

Screen Grab 1
Screen Grab 2

Here is my Hype Function


var outputText = '';
var outputImages = '';

if (!localStorage.visited) { //open 2
var xmlhttp = new XMLHttpRequest();
		var url = "${resourcesFolderName}/L3L1_HTP.json";
		
		xmlhttp.onreadystatechange = function() { //open 3
		    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //open 4
		        var data = JSON.parse(xmlhttp.responseText);
		        
		        loadSceneText(data);
		        return false;
		    } // close 4
		}; // close 3data

xmlhttp.open("GET", url, true);
		xmlhttp.send();

function loadSceneText(data) { // open 5
var HTPText = document.querySelectorAll(".HTPText");

document.getElementById('HTP_badgePlaceholder').innerHTML ='<img src="http://www.aoll.ie/moodleAssets/Maths/L3/LESSON04/images/' + data.images[0].badgeImage + '" width="100%">';

for (var i = 0; i <= data.pageContent.length; i++) {

 var answer = data.pageContent[i]; //wholeNumberAnswers
 //var answerBool = data.correctAnswer[i];	//-- correctAnswer true of false items
  
	for (key in answer) {
		if (answer.hasOwnProperty(key)) {
			outputText += '<u>' +
		 	answer[key] +
			'</u>';
			
       HTPText[i].innerHTML = answer[key];//-- Populate Answer Text element
                 
 
		} // hasOwnProperty check
		
		
		
	} // for each object
	
	
	
} //for each array element

} //close 5 displayScene()
	} // close 2 (if else)
	 else { }
//end	

Here is my JSON file


{
  "pageContent": [
    {
      "headingText": "How To Play"
    },
    {
      "bodyText": "The goal of this game is to complete all of the questions and win the Fraction Time Badge!<br/><br/>Now, get set for the warmup! There are 10 warmup questions followed by 20 badge challenge questions."
    },
    {
      "backBtn": "BACK"
    },
    {
      "nextBtn": "NEXT"
    }
  ],
  "images": [
    {
      "badgeImage": "L3L1-Badge.png"
    },
    {
      "questionImage": ""
    },
    {
      "helpSectionImage": ""
    },
    {
      "anotherImage": ""
    }
  ]
}

If it works in one environment and not another, then the best course of action is to fire up the developer tools and see if it is giving specific errors in the console that could illuminate more information.

As Jonathan says … checking the browser console may give you some idea. I did notice though that in your function above “loadSceneText(data)” you are doing a for loop on the “data.sceneImages” array. Now this array doesn’t exist in your JSON and therefore not in the parsed object “data”. Perhaps this is where the problem is but I’m only guessing. Without seeing the whole picture I can’t be sure. Also in your second screen grab you have the images in a level above the resources folder so your JSON file is pointing to an image that is sure to fire a 404 as that image (“L3L1-Badge.png”) is up a level in the hierarchy. (According to your screen grab)

Thanks @jonathan @DBear the developer tools tell me is that the json failed to get the image resource. However when I check the url of the image it loads the image no problem.

I tried playing around with the folder permissions on the server but that didn’t solve the problem.

Also @DBear the line of code below when combined with the image name from the json file works fine in browser so dont think it is anything to do with the folder structure on the server and must be another problem?

I have also updated the js code in the origional post somehow I pasted in the wrong code so this accounts for the ‘data.sceneImages’ missing array error that you suggested, Im out of ideas now :weary:

document.getElementById('HTP_badgePlaceholder').innerHTML ='<img src="http://www.aoll.ie/moodleAssets/Maths/L3/LESSON04/images/' + data.images[0].badgeImage + '" width="100%">';

Here is the full URL to the image in the code snippet http://www.aoll.ie/moodleAssets/Maths/L3/LESSON04/images/L3L1-Badge.png

So in short the published hype project when placed on the server will not load external resources using a json request that are outside the hype resources folder. I wanted to keep all images in a separate folder on the server for ease of updating and replacing images if needed later.

I am going to try change the code that gets the images to point to the resources folder > then upload the images separately to the resources folder after the published hype file has been uploaded to server.

Will update if this solves the issue.

I mentioned in my previous post that your images are not in the same level as your JSON but also your Hype generated script so if you just use the image name in your JSON it’s not gonna find it. If the image is in the folder that is one level above then you would have reference it as follows.

"../path-to-image"

Because when the reference is made it is made from the script in the resources folder so it looks for the image in the same place. Again this is all speculation as it would be better to share your document so we can see if any other factors are effecting it. I appreciate you’ve shared the code but without seeing the context it’s making it difficult.

You are of course, populating the img src with an absolute url so technically this shouldn’t be a problem as you are only storing and populating the name of the file.

Also, clicking the above URL you have shared gives a 404 error. So I’m thinking that the folder “images” doesn’t exist. Not sure what’s going on there.

Good stuff I will try that out next! The url is fixed now I had moved the image when testing. Many thanks @DBear I will try your suggestion and repost shortly. Stephen

@STE2DG I have done a very crude test on my server using your code. Is this the result you were looking for?

http://hype-expert.uk/testJSON/testJSON.html

or did you want something else. Again your code has variables that even though you are trying to populate them with data they don’t seem to have anyway of being displayed.

“answer” is a variable that contains an object that is populated by the “pageContent” array / object in the JSON. It’s kinda confusing but I think (from your comments) you are looking to populate some text element with an answer. Can you elaborate on more what you want to do and maybe a different more elegant solution can be offered if you want?

Yes @DBear that is exactly the result that I am hoping for, would be grateful if you could share the test file.

Sorry about the confusion around unused variables in the code I had duplicated the code from another scene that populates answers and other text elements but this particular scene just needs the image and some basic text.

Hi @STE2DG no worries about the confusion I assumed you had copied the code from somewhere. This is sometimes the problem :slight_smile:

Here is the file that I have cleaned up: populateFromJSON.hype.zip (20.0 KB)

Please note that it is important that the elements in the scene stay in that order because the innerHTML comes from the JSON file which is also presented in that order. If you change the JSON file you can change the order in the scene. I have left it for now.

Also the if(!localstorage.visited)... doesn't need to be there. I left it in so it wouldn't be too confusing to what I have taken out.

1 Like

Many thanks for that @DBear I have cleaned up the code also exactly as your edit and uploaded it to my server and still no image is appearing…must be a server problem, cache is empty also! puzzled ??

Your file is working on my server so I need to dig a bit deeper into the hype project…

address where you have uploaded?

Your file is working on my server so I need to dig a bit deeper into the hype project…

ahh ok

Cheers for the advice…will post again when i get my head around it

Ok @DBear I knew this was a funny error. I think that either hype/my server or browser was caching some elements of the project and causing conflicts even though I was emptying the cache in Chrome before each test.

I changed the name of the variable that stores the json data and more importantly the Class names of text boxes and the json filename. Now the images loaded in fine.

Almost certain that changing the Class names fixed the issue here but the reason why that solved it is beyond me? Possibly a small bug within Hype? who knows?

Thanks again for the help along the way