Fill-in code

[jonatanschroeder]

Has anyone ever added a pl-integer-input (or other similar inputs) inside a pl-code? pl-overlay seems to work but is a bit clumsy:

[echuber2]

Another clumsy way to do it would be to use a variable for the unknown value and have the input prompt after the code segment. (Looks like I can't mark this comment as anything but "Answer" despite it being a non-answer.)

[glherman]

You can add a bit css to make the input box smaller/tighter so that it's less clumsy. We've done a bit of stuff like this in my class and have a modification of the pl-string element we call pl-embed that we use for everything from annotating diagrams and code to having students fill in tables and other diagrams.

[nealterrell]

Are you able to share that element?

[glherman]

sorry it's not well documented. https://github.com/PrairieLearn/pl-cs233/tree/master/elements/pl-string-embed. There are probably a few things that need to be improved stylistically, but I haven't gotten around to them because I haven't shared this before

[glherman]

Example uses:
https://github.com/PrairieLearn/pl-cs233/tree/master/questions/datapath_MIPS_data
https://github.com/PrairieLearn/pl-cs233/tree/master/questions/pipeline_perf_py

[nealterrell]

I appreciate the response! But I don't have access to that repository, possibly because I'm not at UIUC.

[glherman]

just gave you read access

[nealterrell]

@jonatanschroeder and @glherman -- we're experimenting with pl-overlay like you. We've found that if a student changes the font size of their browser -- using a browser setting, not using Zoom In (which does work) -- the overlaid elements become mispositioned. Any thoughts on how to address that?

[echuber2]

I thought the px unit wasn't supposed to depend on the base font size, but rather the display DPI. (It's not an actual pixel unit, but a magic unit the CSS (or rather, the W3C) defines specially.) What OS?

[echuber2]

Now it occurs to me that some browsers may actually be using the base font size setting in order to detect the device DPI

[nealterrell]

@echuber2 here is a before and after comparison.

[nealterrell]

This is on Chrome, macOS.

[glherman]

So, the issue is that the size of the overlay background is changing based on the font size but the pixel locations of the embedded input boxes are staying the same. I think the only way around this is to somehow read the browser state and dynamically adjust your input box locations accordingly. If I knew how to do that...