How to customize a CTFd Instance without changing the theme in order to sort the challenges by difficulty

Table of Contents

Why this post ?
#

Because I was in the situation where I had a CTFd instance, no time, no way to change the theme, and all the challenges were input in a random order (so you had hard - easy - medium - hard on the same category line). Since in our theme (that once again could not be changed) the tags were not shown on the challenges screen (but only when clicking on a specific challenge) I wanted to at least have the easiest first. I searched online and could not find any out-of-the-box usable code.

TLDR : How do I do to have them sorted
#

define a difficulty scale. Mine was
- “easy”
- “easy-medium”
- “medium”
- “medium-hard”
- “hard”
use the code below and remember to
- update the difficulty scale
- read the code and check it does implement a compareFn function and nothing malicious (you should never use random code you don’t understand)

Detailed explanation :
#

Once you’re there scroll down to the bottom of the page to the theme settings. Click on the Build button and input the below code in the Challenge Order Custom Function.

Note that a simpler way would have been to set the difficulty as a number scale (1 to 5 or 1 to 10) and then just compare these after a cast as ints, but I had already the whole CTF with these 5 tags, so I went with the easiest route.

function compareFn(a, b) {
    //const difficulty_order = ["easy", "easy-medium", "medium", "medium-hard", "hard"]
    const difficulty_order = ["TODO"]
    if (a.tags && b.tags) {
    if (difficulty_order.indexOf(a.tags[0].value) < difficulty_order.indexOf(b.tags[0].value)){
        return -1
    } else if (difficulty_order.indexOf(a.tags[0].value) > difficulty_order.indexOf(b.tags[0].value)){ 
        return 1
    } else {
        return 0
    }

    } else if (!a.tags && b.tags) {
        return -1
    } else if (a.tags && !b.tags) {
        return 1
    }
    return 0;
}

Then don’t forget to hit update (Twice 🤡)

And as a bonus if you want to set metadata to have link previews that look like this :

You can use the first field of the same page and paste in here values generated by using https://opengraph.dev/

See you at the THCon or the THCon’s CTF

Why this post ? #

TLDR : How do I do to have them sorted #

Detailed explanation : #

Why this post ?
#

TLDR : How do I do to have them sorted
#

Detailed explanation :
#