formatting issue with khan academy exercise

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

[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.

[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.