Write a SurvBee Package Demo Experiment Run Experiment

Write a SurvBee Package

Jaap Murre

Describes in progressively more difficult steps how to write your own SurvBee package.

These packages can be used with the SurvBee drag-and-drop system.

If you are a registered user and signed in, you can here copy this script and its stimuli to your own account, where you can edit it and change it in any way you want.

It is absolutely free to register (no credit card info asked!). You can then instantly copy this experiment with one click and edit it, change its accompanying texts, its landing page, stimuli, etc. Invite your colleagues, friends, or students to check out your experiment. There is no limit on how many people can do your experiment, even with a free account.

The catch? There is no catch! Just keep in mind that with a free account, you cannot collect data. For teaching that is usually not a problem. For research, prepaid data collection (unlimited subjects) starts as low as €10.00 for a 10-day period.

// Step 1: Make sure the Is SurvBee Package checkbox is checked (below editor window)
// Step 2: Create a Function

function wait_ms_1() {
    await(1000);
}

// You can now see this package in the list but it is empty and the function 
// wait_ms is not visible. You can of course use it elsewhere within this script.

// Step 3: 
// To turn an ordinary function into a SurvBee block you must do two things
//  - 3.a Rewrite the function definition to exports.wait_ms = function() { ... }
//    This is a format that can be imported. It is one of the international standards
//    for writing packages with functions that can be imported. 
//  - Add /* */ comments immediately above the function but have four stars instead
//    of just 1, as in /**** */ or /*****/. Now, SurvBee recognizes it as a SurvBee
//    block that can be dragged-and-dropped from the package.
//
// To stress this: THE SPECIAL COMMENT MUST COME IMMEDIATELY BEFORE THE FUNCTION

/*****/
exports.wait_ms_2 = function() {
    await(1000);
}

// Step 4: Adding an argument

/*****/
exports.wait_ms_3 = function(ms) {
    await(ms);
}

// The above works but (1) the label reads Ms (auto-capitalized) and the
// argument ms is interpreted as a string (check the JavaScript code under the
// Script tab on the right)

// Step 5: Adding an argument with a type.
// By using a more descriptive argument name 'milliseconds' the label becomes
// clearer to the user (experimenter). With the n_ prefix, SurvBee knows you 
// intend it to be a numeric argument. The n_ is removed in the label.

/*****/
exports.wait_ms_4 = function(n_milliseconds) {
    await(n_milliseconds);
}

/* There are several types of prefixes:

    richtext_: {type:'richtext', default: ''}
    text_: {type: 'textarea', default: ''}
    arr_: {type: [{option: ''}]} // Array of string  // TODO: (***) Simplify this to real array
    js_: {type: 'js', default: ''}
    var_: {type: 'varname', default: ''}
    obj_: {type: 'objectname', default: ''}
    n_: {type: 'number', default: 0}
    i_: {type: 'number', default: 0, decimals: 0}
    perc_: {type: 'number', default: 0, min: 0, max: 100}
    bool_: {type: 'checkbox', default: false}
    color_: {type: 'color', default: '#ffffff'}
    date_: {type: 'date', default: ''}
    time_: {type: 'time', default: ''}
    email_: {type: 'email', default: ''}
    url_: {type: 'url', default: ''}
    image_: {type: 'select_image', default: ''}
    audio_: {type: 'select_audio', default: ''}
    video_: {type: 'select_video', default: ''}
    txt_: {type: 'select_txt', default: ''}
    md_: {type: 'select_md', default: ''}
    csv_: {type: 'select_csv', default: ''}
    excel_: {type: 'select_excel', default: ''}
*/

// For example, it is possible a block that expects an image:

/*****/
exports.imageblock = function(image_an_image_file) {
    showimage(image_an_image_file);
}


// perc_ also allows min and max values e.g. 0 and 100
// A bug is that though they range works, 0 and 100 are shown in the label

/*****/
exports.padding = function(perc_0_100_padding) {
    await(perc_0_100_padding);
}


// Step 6: Adding properties with more details.
// Though the prefix-shorthand comes in handy for quick prototyping, more
// control can be obtained by adding details to the comments. This is done
// with YAML. See https://yaml.org/.

/****
description: wait  ms      # With  you can show the value of the function argument
data_object:
    - ms: 
        default: 1000
        label: Number of milliseconds to wait
        type: number
*/
exports.wait_ms_5 = function(ms) {
    await(ms);
}

// As we can see, there is a data_object that holds important information about
// each argument. In this case, there is only one, ms, and it has a default
// value of 1000, a label and a type. It is now no longer necessary to express
// the type and label in the name of the variable, which we can simplify to 'ms'.
// The description is the text shown on the block when it is closed. We can shown
// the contents of the variable ms with . 
//
// The descriptions need show the function directly (here: wait_ms_5()) but
// should describe consisely what the block does. Ideally, someone who reads the
// descriptions on a SurvBee block construction should have a good impression of
// what the script does.

You can download the files as follows: Click on the file (link) and then right-click and choose Save as... from the menu. Some media files (e.g., sound) will have a download button for this purpose.

This experiment has no files of this type
This experiment has no files of this type
This experiment has no files of this type
This experiment has no YouTube links
This experiment has no files of this type