Maze on new farm (cont'd)

[suz]

Hi Jeremy,

Following up from my post in the bug section the other day… I may have been too enthusiastic about your suggestion working for my case. I have spent about two days now trying to adapt my old maze experiment to the new farm, but I seem to be missing an essential part, probably on the css front.

Sorry for the mess, but here is what I have attempted (the main.js for all four examples are identical):

1. Experiment “as is” from the old farm, and how it should work, with that line commented out as per your suggestion (i.e., nothing in PennController.css), but with PennController.js 1.8: https://farm.pcibex.net/r/lJLlXu/

These things work as intended in this version, but not in others (see below):
* All text left-aligned, but in the center of the screen
* All maze items in the center of the screen (i.e., directly below the progress bar
* All feedback indicators (great!/oops!) in center of the screen
* Sentence ID indicator in main experiment in center of the screen
* Break indicator in the center of the screen

2. As the above experiment uses PennController 1.8, I cloned it and uploaded PennController.js v2.0, but left all other files untouched: https://farm.pcibex.net/r/wCTYWg/

What is seriously off:
* Intro screen text extreme left
* Instructions off to the far left, gmaze.png in the center (misalignment probably easily fixable)
* Maze items substantially to the left
* All feedback indicators extreme left
* Sentence ID indicator in main experiment in center (as intended, probably because it has a .center() command)
* Break indicator in center of screen (as intended, ditto)

3. As the version in 2 has issues, I fiddled with some of the css suggestions as per your suggestion in my post last week (cloned from (2)): https://farm.pcibex.net/r/JXsLEt/

* Everything still off, with some settings in the css, text is actually off the screens.

4. As I suspect there could be issues with my css files (e.g., global_main.css) as I had changed that code a fair bit iirc on the old farm, and because the changelog for 2.0 mentions a “fix” to a canvas issue, I copied an empty project on the new farm and uploaded the Maze.js, MazeSeperator.js, Maze.css, and MazeSeparator.css:

When “width: 40em !important;” is commented out, this is how it looks: https://farm.pcibex.net/r/TMxKmq/

* All Maze items are now off to the right
* All feedback indicators to the left (not as extreme as above)
* In main experiment, sentence IDs are extreme right
* Break text to extreme right
* Debrief radio buttons text not showing

When the “width: 40em !important;” is not commented out, the text items are fine-ish, but the maze items are still off. Fwiw, I also tried the “default” maze/mazeseparator files (.js, .css) directly vom vboyce’s github, as the Maze.js had an update six months ago, but the only difference is which buttons are used to select the words.

## tl;dr:
I could continue with the 1.8 version, but I am sure this is not appreciated. I’m no css wizzard, but I fail to see a pattern with the attempts (2)-(4). Any idea where I’m going wrong? It seems I can either fix the maze items OR the text trials, but not both. (And I do have a hard time with trying to get things centered, but left-aligned.)

That said: after I suspected my old code could conflict with 2.0, I went through the basic and advanced tutorials again, just to make sure I haven’t missed any major changes. The tutorial was a bit frustrating, because changes in the editor often only took effect in the preview or “open in new tab” after multiple page refreshes, and the auto-save was also unreliable (I often got “error there must be some items in the running order” because a comma or a command wasn’t saved properly).

Thanks, any pointers much appreciated.

[Jeremy]

Hi,

Using version 4, replace the content of PennController.css with this:

.PennController {
    position: static !important;
    width: auto !important;
}

This way, the main container will inherit the max width of its children (including the 1000px width of the Maze controller) and because its position will be set to static, it will be centered by default. Note the !important keywords to overwrite the style that’s normally applied by the PennController script itself

Re. the labels on the radio scale, explicitly set their positions so they’re printed accordingly: .labelsPosition("right")

Jeremy

[suz]

Hi Jeremy,

Thanks so much for this, the relief is real 😉

–Susanne

[Author]

Posts