New pl-overlay element
Posted on 2024-07-23 by Matt West
Nicolas Nytko (CS BS '19, CS MS '22) has added an
amazingly flexible pl-overlay
element that lets you place
elements on top of each other in arbitrary locations. For example, you can put a
pl-string-input
on top of a
pl-figure
to ask students to label a diagram:
Each sub-element in the overlay is inside a pl-location
tag,
which lets you specify the position and alignment relative to the overlay area, and you can use
pl-background
to set an image or other content as the lowest
layer. The source to the above example is given here:
<pl-overlay> <pl-background> <img src="{{options.client_files_question_url}}/europe_annotated.png" width="700px"> </pl-background> <pl-location left="460" top="290"> <pl-string-input correct-answer="Ukraine" answers-name="string_value" show-help-text="false" size="7" remove-leading-trailing="true" ignore-case="true"></pl-string-input> </pl-location> </pl-overlay>
For more information, see the pl-overlay documentation.