Back to news list

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.