Kolibri: formatting issue with khan academy exercise

[indirectlylit]

Summary

question is partially obscured by input box

System information

• Version: Kolibri 0.4.0alpha4.dev25
• Operating system: OSX
• Browser: Chrome

How to reproduce

Khan Academy EN Channel: 1ceff53605e55bef987d88e0908658c5
'Add within 5' exercise: 0fe99d22381457cbbff1f3d3dac4fbf3

local URL

Screenshots

[jamalex]

Vertical alignment is off more generally in some other exercises, @ralphiee22 was seeing. E.g. in multi-line addition, it was collapsing it all to one row. Also, hints were being put on top of each other rather than showing up below the previous.

[DXCanas]

@rtibbles how hard do you think it would be for me to get into this?

[rtibbles]

I would create a new virtualenv in which you are expecting the renderer to be built (rather than just using the pip package ordinarily in your other virtualenv), and follow the instructions here for dev: https://github.com/learningequality/kolibri-exercise-perseus-plugin#how-can-i-install-this-plugin-for-development

[DXCanas]

Wow that's a big channel

[DXCanas]

Styles are in-lined for graphie exercises. any span (including the ones that include katex as in the exercise shown) are given absolute positioning inside of a relatively positioned block. Not sure, but I think this is the line that causes that bit. Removing either one of those tags fixes the wrapping. I'm assuming it's supposed to be some kind of vertical-center hack, but it isn't behaving that way. There's also a some weird margins and stuff going on.

Currently, our wrapper doesn't seem to have a clean solution to something like this. Do you have any ideas @rtibbles? Could I technically edit the function by requiring it and changing up the values on render? Or do you know of a better way using react or something?

[rtibbles]

It is not impossible to go in and hack our way through the perseus source code, I have done it myself here: https://github.com/learningequality/kolibri-exercise-perseus-plugin/blob/master/kolibri_exercise_perseus_plugin/webpack.config.js#L19 in order to change the path of the Khan Academy throbber.gif.

However, I am reluctant to use that except as a last resort strategy. Given that within KA, it is possible to make these things render properly without messing with the styling applied, I assume if we apply the right sort of things to the external CSS, we may be able to produce the desired result.

Did you have any luck with applying some of these styles? https://github.com/Khan/perseus/blob/master/stylesheets/local-only/khan-exercise.css

To start with, you could try applying the entire style sheet, and then pare it back.

[indirectlylit]

I would look for clues in the unscoped styles of the perseus renderer plugin: https://github.com/learningequality/kolibri-exercise-perseus-plugin/blob/master/kolibri_exercise_perseus_plugin/assets/src/views/index.vue#L421

As noted in https://github.com/learningequality/kolibri-exercise-perseus-plugin/issues/16 we should really not be doing any of that, and my guess is that's causing the breakage.

[lauradanforth]

[rtibbles]

Have pushed this to 0.5.x - https://github.com/learningequality/kolibri-exercise-perseus-plugin/issues/74 has provided some short term relief, but the longer term solution will be to completely sandbox the renderer.

[DXCanas]

We were missing tons of styles (before this) for this kind of issue - do you still think sandboxing is the solution, @rtibbles ?

I think there's something to be said about being able to modify styles and some functionality

[rtibbles]

Our investigations have softened my approach, certainly. We can close this once your pr is merged.

[radinamatic]

Not seeing this on latest 0.5.0 build.

System information

• Version: 0.5.0-beta1-dev22
• Operating system: Windows 7 & 10, Ubuntu 16.10
• Browser: Chrome & Firefox