Hello
I set "Skip" button and use before_next_page for participant skip the page if he chooses not to do the slider task.
The skip button is working, there is only one more problem. Since the slider field is a integerfield blank= True, for instance, does not work. So the player still has to make an entry before skipping to the next page.

Is it even possible that no response to the slider task and the skip button still work?


html template:

...... existing code
<table class="table table-striped">
    <tr>
        <th><p>Target1: {{ player.target_value_1 }}</p><input type="range" name="slider1" min="-1" max="100" oninput="updateDescription1(this)" value="-1"  list="values">  <output  id="description1" style="text-align:center ; font-size: 15px"></output></th>
        <th><p>Target2: {{ player.target_value_2 }}</p><input type="range" name="slider2" min="-1" max="100" oninput="updateDescription2(this)" value="-1"  list="values">  <output  id="description2" style="text-align:center ; font-size: 15px"></output></th>
        <th><p>Target3: {{ player.target_value_3 }}</p><input type="range" name="slider3" min="-1" max="100" oninput="updateDescription3(this)" value="-1"  list="values">  <output  id="description3" style="text-align:center ; font-size: 15px"></output></th>
        <th><p>Target4: {{ player.target_value_4 }}</p><input type="range" name="slider4" min="-1" max="100" oninput="updateDescription4(this)" value="-1"  list="values">  <output  id="description4" style="text-align:center ; font-size: 15px"></output></th>
    </tr>
</table>

<datalist id="values">
    <option value="0" label="0">0</option>
    <option value="50" label="50">50</option>
    <option value="100" label="100">100</option>
</datalist>
<script>
    let description1 = document.getElementById('description1');
    function updateDescription1(input) {
        let slider1 = parseInt(input.value);
        description1.innerText = `${slider1}`
    }
    let description2 = document.getElementById('description2');
    function updateDescription2(input) {
        let slider2 = parseInt(input.value);
        description2.innerText = `${slider2}`
    }
    let description3 = document.getElementById('description3');
    function updateDescription3(input) {
        let slider3 = parseInt(input.value);
        description3.innerText = `${slider3}`
    }
    let description4 = document.getElementById('description4');
    function updateDescription4(input) {
        let slider4 = parseInt(input.value);
        description4.innerText = `${slider4}`
    }
</script>

<form method="post" id="main-form">
    <p>
        <button type="submit" class="btn btn-danger" name="skipped_task" value="1" onclick="skipTask()">Skip this task</button>
    </p>
</form>
<script>
    function skipTask() {
        // Check if any slider has been interacted with (not -1)
        if (document.getElementsByName('slider1')[0].value != -1 ||
            document.getElementsByName('slider2')[0].value != -1 ||
            document.getElementsByName('slider3')[0].value != -1 ||
            document.getElementsByName('slider4')[0].value != -1) {
            // At least one slider has been interacted with, set skipped_task to 'true'
            document.getElementById('id_skipped_task').value = 'true';
        } else {
            // No sliders have been interacted with, submit form with skipped_task = true
            document.getElementById('id_skipped_task').value = 'true';
            document.getElementById('main-form').submit();
        }
    }
</script>

{{ next_button }}



 __init__.py
 ...existing code
 class Player(BasePlayer):
    slider1 = models.IntegerField(min=0, max=100, blank=True)
    slider2 = models.IntegerField(min=0, max=100, blank=True)
    slider3 = models.IntegerField(min=0, max=100, blank=True)
    slider4 = models.IntegerField(min=0, max=100, blank=True)
    slider5 = models.IntegerField(min=0, max=100, blank=True)

    correct_rounds = models.IntegerField(initial=0)

    target_value_1 = models.IntegerField()
    target_value_2 = models.IntegerField()
    target_value_3 = models.IntegerField()
    target_value_4 = models.IntegerField()
    target_value_5 = models.IntegerField()

    skipped_task = models.BooleanField(initial=False, blank=True)


class Slider(Page):
    form_model = 'player'
    form_fields = ['slider1', 'slider2', 'slider3', 'slider4', 'skipped_task']

    @staticmethod
    def vars_for_template(player):
        player.target_value_1 = random.randint(0, 100)
        player.target_value_2 = random.randint(0, 100)
        player.target_value_3 = random.randint(0, 100)
        player.target_value_4 = random.randint(0, 100)
        player.target_value_5 = random.randint(0, 100)

        return{
            'target_value_1': player.target_value_1,
            'target_value_2': player.target_value_2,
            'target_value_3': player.target_value_3,
            'target_value_4': player.target_value_4,
            'target_value_5': player.target_value_5,
            'round_number': player.round_number
            }

    @staticmethod
    def before_next_page(player: Player, timeout_happened):
        if (player.slider1 is None or
                player.slider2 is None or
                player.slider3 is None or
                player.slider4 is None):
            player.skipped_task = True
        # Check if the skip button was pressed
        if player.skipped_task:
            # Logic for skipping to the next page
            pass


class End(Page):
    @staticmethod
    def is_displayed(player):
        return player.skipped_task

page_sequence = [Slider, End]