The HTML Judge is capable of rendering the student's code in Dodona. HTML will only be shown if their HTML code was valid, and CSS will only be shown if both HTML and CSS were valid.
The built-in HtmlSuite or CssSuite already do this for you. HtmlSuite validates HTML, CssSuite validates both HTML and CSS.
from validators.checks import CssSuite, TestSuite
def create_suites(content: str) -> List[TestSuite]:
# CssSuite automatically validates both HTML and CSS
suite = CssSuite(content)
return [suite]Click here for how to check for validity with own instance of TestSuite.
When using an instance of TestSuite, this means it is required to check for validity at least once. In order to do this, the validate_html and validate_css checks can be used.
from validators.checks import TestSuite, ChecklistItem
def create_suites(content: str) -> List[TestSuite]:
suite = TestSuite("CSS", content)
# Create a ChecklistItem that validates HTML and CSS
suite.make_item("The HTML and CSS are valid.",
suite.validate_html(),
suite.validate_css()
)
# ... other checks
return [suite]Keep in mind that there may be artifacts from Dodona's own CSS that are applied onto the student's submission. This can result in the rendering not being 100% accurate, but has no influence on the tests being correct or not.
Your students can embed images into their HTML using the <img> tag. The files for these images must be placed in /description/media, and not in any subdirectories. When rendering, the filepath your student uses will be parsed into one that works on Dodona, so they can store the images wherever they want locally. The judge adjusts the filepath for img srcs to make them refer to the /description/media folder. This allows them to have an organized directory structure without having to worry about the file not being found.