Zipped Resources

PennController offers two methods for including multimedia resources in your experiments:

1. each of them is separately hosted on and requested from a distant server
2. all of them are contained in a single ZIP archive that is hosted on and requested once from a distant server

If your experiment uses many files and is sent to many participants, the number of requests to the distant server can become quite massive. The second method has the advantage of sending only one request to the distant server, and making sure that all the resources are loaded locally in the cache of the participant’s browser.

The ZIP method comes with a limitation though: you need to upload your ZIP file on a server that allows cross-domain requests. This is typically NOT the case for cloud services such as Dropbox or Google Drive. If you access your server through an FTP protocol, chances are that you can apply the method below to grant your participants’ browsers access to your ZIP file.

Requirements

• Access to a host server that lets you configure CORS settings
• All your resource files should be at the root of the ZIP archive, i.e. they should not be nested in a folder inside the ZIP file

Uploading and granting access to ZIP files

If you’re using an Amazon S3 bucket

Write these rules in the CORS configuration of the bucket containing your ZIP file:

[generic]
[
{
“AllowedHeaders”: [
“*”
],
“AllowedMethods”: [
“GET”
],
“AllowedOrigins”: [
“https://expt.pcibex.net”
],
“ExposeHeaders”: [
“Accept-Ranges”,
“Content-Range”,
“Content-Type”,
“Content-Encoding”,
“Content-Length”
]
},
{
“AllowedHeaders”: [
“*”
],
“AllowedMethods”: [
“GET”
],
“AllowedOrigins”: [
“https://farm.pcibex.net”
],
“ExposeHeaders”: [
“Accept-Ranges”,
“Content-Range”,
“Content-Type”,
“Content-Encoding”,
“Content-Length”
]
}
]
[/generic]

If you’re using a webserver

1. Open your favorite text editor and enter the following:

[generic]
# with AJAX withCredentials=false (cookies NOT sent)
Header always set Access-Control-Allow-Origin “*”
Header always set Access-Control-Allow-Methods “GET”
Header always set Access-Control-Allow-Headers “X-Accept-Charset,X-Accept,Content-Type”
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]
[/generic]

2. Save your file under the name .htaccess making sure that no extension is added to the filename (mind the period at the beginning). If your editor or operating system does not allow you to give this name to your file, name it htaccess.txt: you will rename it later after uploading it on your server. Note: make sure to save it as plain text and not as, for example, Rich Text Format (RTF).
3. Using your method of choice (e.g., the software FileZilla) access your server and upload the ZIP file containing your resources in a dedicated folder (create a new folder if you do not already have a specific folder).
4. Upload your .htaccess file in the exact same folder. The .htaccess file grants access to any file located in the folder containing it to any scripts run in any browser, so it is important that you upload it in a folder that only contains files you are willing to grant such access to.
5. [OPTIONAL] If you could not use this filename before (due to your operating system’s settings for instance) rename your file .htaccess.

In your IBEX project

Simply refer to the ZIP files uploaded on your server by using the command PreloadZip in your experiment’s script:

[js try=”data”]
PennController.ResetPrefix(null);

PreloadZip(“https://files.lab.florianschwarz.net/ibexfiles/PennController/SampleTrials/stillalienspictures.zip”); // Pictures
PreloadZip(“https://files.lab.florianschwarz.net/ibexfiles/PennController/SampleTrials/stillalienssounds.zip”); // Sounds

newTrial(
newImage( “alien” , “alien_blue.png” )
.settings.size( 200 , 200 )
.print()
,
newAudio( “sentence” , “stillalien1.mp3” )
.play()
.wait()
);

newTrial(
newImage( “alien” , “alien_red.png” )
.settings.size( 200 , 200 )
.print()
,
newAudio( “sentence” , “stillalien2.mp3” )
.play()
.wait()
);
[/js]