Slider in Pavlovia Surveys

Online experiments Pavlovia Surveys
1

Is it possible to create a slider as a question type in Pavlovia Surveys? There is no such question type. I added an html element from Rebecca Hirst / html_sliders_demo · GitLab, but the Submit button doesn’t work.
I would be grateful if you could point me to my mistake.

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script type="text/javascript">
        function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
                vars[key] = value;
            });
            return vars;
        }

        function getUrlParam(parameter, defaultvalue) {
            var urlparameter = defaultvalue;
            if (window.location.href.indexOf(parameter) > -1) {
                urlparameter = getUrlVars()[parameter];
            }
            return urlparameter;
        }
        var xRes = getUrlParam('xRes', 'Empty') * .8;
        var yRes = getUrlParam('yRes', 'Empty') * .04;
    </script>
    <style type="text/css">
        <!-- .style1 {
            font-size: 40px
        }

        .style2 {
            text-align: left
        }

        input.checkbox {
            width: 40px;
            height: 40px;
        }

        input[type=radio] {
            width: 40px;
            height: 40px;
        }

        .button {
            background-color: #04AA6D;
            border: none;
            color: white;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;

            font-size: 20px;
            margin: 4px 2px;
            border-radius: 12px;
        }

        -->
    </style>
</head>
<style>
    .slidecontainer {
        width: 100%;
    }

    .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 25px;
        background: lightgrey;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #04AA6D;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #04AA6D;
        cursor: pointer;
    }

    .desk {
        display: flex;
        justify-content: space-between;

    }

    .scale {
        color: black;


    }

    datalist {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        writing-mode: vertical-lr;
        
        width:100%;
    }
    
    option {
  padding: 5;
}
</style>
</head>

<body id="bodyForm">
    <form name="form1" method="post" action="">
        <p class="style2"> How often do you consider referral to radiation therapy for basal cell skin cancers? </p>
        <div class="slidecontainer" , id='slider1'>
            <input type="range" min="1" max="100" value="50" class="slider" id="myRange1" list="values">
            <datalist id="values">
  <option value="0" label="Very frequently"></option>
  <option value="25" label="Frequently"></option>
  <option value="50" label="Occasionally"></option>
  <option value="75" label="Rarely "></option>
  <option value="100" label="Never"></option>
</datalist>
        </div>


        <div style="margin:50px"></div>
        <div class="slidecontainer" , id='slider2'>
            <p>How often do you consider surgical excision for basal cell skin cancers? </p><input type="range" min="1" max="100" value="50" class="slider" id="myRange2" list="values">
                        <datalist id="values">
  <option value="0" label="Very frequently"></option>
  <option value="25" label="Frequently"></option>
  <option value="50" label="Occasionally"></option>
  <option value="75" label="Rarely "></option>
  <option value="100" label="Never"></option>
</datalist>
        </div>
        
        <div style="margin:50px"></div>
    </form>
    <tr>
        <td colspan="2" style="text-align:right"><input id="submitbutton" type="submit" name="Submit" value="Submit" class="button"></td>
    </tr>
    <script>
        document.getElementById('bodyForm').style = "width: " + xRes + "px; font-family: Arial, Helvetica, sans-serif; justify-content: left; background-color: white; color: black; font-size: " + yRes + "px";
    </script>
    <script>
        //update if each slider has been moved (so that the participant can only press submit if all sliders have been moved from default)
        var slider1 = document.getElementById("myRange1");
        var output1 = document.getElementById("slider1txt");
        slider1.moved = false;

        // Update the current slider value (each time you drag the slider handle)
        slider1.oninput = function() {
            output1.innerHTML = this.value;
            this.moved = true;
        }

        var slider2 = document.getElementById("myRange2");
        var output2 = document.getElementById("slider2txt");
        slider2.moved = false;

        // Update the current slider value (each time you drag the slider handle)
        slider2.oninput = function() {
            output2.innerHTML = this.value;
            this.moved = true;
        }



        var mybutton = document.getElementById("submitbutton");

        mybutton.onclick = function() {
            console.log('buttonClicked!');
            this.value = 'submitted';

        }
    </script>

</body>

</html>
1 Like