Creating a New Challenge Page

This guide explains how to translate a challenge brief (as received from content contributors) into a challenge page file that renders correctly on the site.

Challenge pages live in content/challenges/ and are rendered by _includes/challenge.html + _includes/partials/challenge-section-body.html.

File naming

Use the format <shortname>-<year>.md, e.g. vasdl-2026.md, safe-2025.md.

Front matter reference

Every challenge file is pure YAML front matter — there is no body content below the closing ---.

---
layout: challenge.html
title: "Full Challenge Title Here"
permalink: /challenges/<shortname>-<year>/
badges:
  - text: Video Challenge
    icon: youtube_video.svg
  - text: Audio Challenge
    icon: ear_sound.svg
    color: "bg-ul-orange-red"   # optional — overrides the default alternating colors
tags:
  - challenges
intro_text: |
  <b>Hosted by:</b> UL Research Institutes — Digital Safety Research Institute (DSRI)<br>
  Co-located with the <em>Workshop Name</em> at CONFERENCE YEAR
description: >-
  One or two sentence plain-text description of the challenge (shown below the title).
challenge_url: "https://app.dyff.io/challenges/<id>"   # omit if not yet available

tabs:
  anchor: challenge-details
  sections:
    - title: Section Title
      description: |
        Markdown content for this section.
      steps:
        - title: Step Title
          description: Step content (supports markdown).
      disclaimer: Optional italic footnote text shown at the bottom of the section.
---

Badge colors

The default alternating colors are bg-ul-sky-blue (odd) and bg-success (even). Override with the color key on any badge. Other available classes: bg-ul-orange-red, bg-ul-dark-blue.

Badge icons

Icons are resolved from https://cdn.dsri.org/icons/<filename> unless the value already contains / or ://. Common icons: youtube_video.svg, ear_sound.svg, mail.svg, code_blocks.svg, chat_bubble.svg, description.svg.

Tabs and sections

The tabs block drives the scrollable pill-nav on the page. Each entry under sections becomes one tab.

tabs:
  anchor: challenge-details   # keep this value; it is the page anchor
  sections:
    - title: Overview
      description: |
        Full markdown block for this tab.

Section with steps

steps renders a visual list with a circle/icon on the left and content on the right.

- title: Rules
  description: Introductory paragraph shown above the steps.
  steps:
    - title: Leaderboards
      numbered_item: true       # renders a numbered circle (1, 2, 3 …)
      description: Rule text here.

    - title: Contact The Organizers
      icon: mail.svg            # renders an icon in the circle instead of a number
      description: "[[email protected]](mailto:[email protected])"

Step circle options (mutually exclusive, pick one):

Section disclaimer

  disclaimer: By registering you agree to the rules above.

Shown as small italic text at the bottom of the section.

Special content blocks

Primary metrics card

Use this HTML snippet inside a description field to render the highlighted metrics box:

description: |
  <div class="content-card">
    <div class="content-card-label">Primary Metrics</div>
    Balanced Accuracy and ROC AUC for detection; IoU for localization.
  </div>

  Additional paragraph text below the card.

Horizontal rule between sub-sections

Inside a description field, insert a visual divider with:

<hr class="section-pills-separator my-4">

Inline CTA button

<a href="https://forms.gle/..." class="btn btn-primary mt-2">Register</a>

Markdown tables (e.g. schedule)

Standard GFM tables work inside description blocks:

| Event | Date | Status |
| :--- | :--- | :--- |
| Pilot Task Opens | November 24, 2025 | ✅ Open |
| Main Task 1 Opens | December 8, 2025 | ✅ Open |

Standard section structure

Most challenges follow this tab order. Omit or reorder sections as needed — unused sections can be left as stubs (description: No updates yet.) rather than deleted, to make future updates easier.

Mapping from a contributor brief

Contributor briefs arrive as plain markdown. Here is how each section maps:

Worked example: adding a new challenge

1. Copy an existing file as a starting point:

   cp content/challenges/vasdl-2026.md content/challenges/newchallenge-2026.md
   

2. Update title, permalink, badges, intro_text, description, and challenge_url.

3. Work through each tab and paste in content from the brief, converting prose to the YAML structure described above.

4. For sections not yet ready (Updates, Schedule, Results), leave a stub:

   - title: Updates
     description: No updates yet.

5. Build the site locally and verify the page renders correctly before opening a PR.

Quick-reference: full minimal example

---
layout: challenge.html
title: "Example Challenge 2026"
permalink: /challenges/example-2026/
badges:
  - text: Image Challenge
    icon: description.svg
tags:
  - challenges
intro_text: |
  <b>Hosted by:</b> UL Research Institutes — Digital Safety Research Institute (DSRI)<br>
  Co-located with the <em>Example Workshop</em> at EXAMPLE CONF 2026
description: >-
  One sentence describing what participants will do.
challenge_url: "https://app.dyff.io/challenges/<id>"

tabs:
  anchor: challenge-details
  sections:

    - title: Overview
      description: |
        Extended description of the challenge.

        **Objective:** What participants must accomplish.

        **Recognition:** What top performers receive.

        <hr class="section-pills-separator my-4">
        <div>
          <span class="fw-bold text-uppercase mb-1 text-ul-dark-blue fs-6">Ready to participate?</span>
          <p>Register your team to get started.</p>
          <a href="https://forms.gle/..." class="btn btn-primary mt-2">Register</a>
        </div>

    - title: Updates
      description: No updates yet.

    - title: Participation
      steps:
        - title: Register
          description: Fill out the registration form.
        - title: Implement your model
          description: Build a Docker image serving the inference API.
        - title: Submit
          description: Upload your image to the Dyff platform.

    - title: Datasets
      description: |
        Novel, private datasets created for this challenge. No training data provided.

    - title: Evaluation
      steps:
        - title:
          description: |
            <div class="content-card">
              <div class="content-card-label">Primary Metrics</div>
              Balanced Accuracy and ROC AUC for detection; IoU for localization.
            </div>

            Public and private leaderboards will both be maintained.

    - title: Rules
      description: Participants agree to the following rules.
      steps:
        - title: Leaderboards
          numbered_item: true
          description: The private leaderboard determines final rankings.
        - title: Submission Limits
          numbered_item: true
          description: Participants are limited in daily submissions.
        - title: Compliance
          numbered_item: true
          description: Failure to comply may result in disqualification.
      disclaimer: By registering, participants agree to these rules.

    - title: Helpful Resources
      steps:
        - title: Contact The Organizers
          description: "[[email protected]](mailto:[email protected])"
          icon: mail.svg
        - title: Example Submission
          description: "[gitlab.com/dsri-org/challenges/example-2026](https://gitlab.com/dsri-org/challenges/example-2026)"
          icon: code_blocks.svg
---