Update database upon click of button but don't change stage.

[Thomas Dudek]

Dear LIONESS team,

I am trying to create a button that changes some values in the database 'onclick', but that will not change the current stage. 

I modified the existing button's script from the default button provided by the LIONESS programmers. 

The problem with my button is that it is in a Javascript element, which is apparently always executed at the top and is also somehow evaluated as being the first element of the whole stage, even if I put the JScript somewhere below my other text boxes. 

Is it possible to somehow create a button that won't try to change the stage but that has the same "execute program on click" functionality in LIONESS? 

My experiment's ID is 24354. I created a public copy named "update_on_button_click". 

The first stage currently has three buttons that all should do the same but none works exactly as it should. The best working button is still the one in the textbox. This button's setValue functionality doesn't work, though. It will execute and change the local variable part2 but won't actually update the database. That's perhaps because of the missing ' ' in the setValue('var;. var) function, but when I include these, the textbox evaluates these ' ' as symbols and uses different code (in the JScript source it looks something like #39$ or so). 

Thanks for your help! Very much appreciate all support I can get. 

Thomas

[Steven Stoft]

Thomas,

I'm still a newbie, and don't have time to dig into your site, but I thought this might help.

• In your text box put <p id="buttonHere"> </p>
• In you JS element at the top,
1. put the HTML code for a button with onclick into a JS var HTMLbutton
• HTMLbutton = '<button onclick="myFunction()">Click me</button>';
2. use document.getElementById("buttonHere").innerHTML = HTMLbutton; in you JS element to build the button
3. define myFunction() as you like in the JS element
• It should include setValue()

I find it's a mess to put funny stuff directly into the text element, so I put difficult things there with JS

Cheers,

Steve

--
You received this message because you are subscribed to the Google Groups "LIONESS Lab help and discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to lioness-lab...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/lioness-lab/dfa0625a-1397-4f39-a2a3-4ccaba8baf00n%40googlegroups.com.

[Thomas Dudek]

Hi Steve,

Thanks for your answer here. I'm probably even more of a newbie with Javascript than you are. 

I tried what you just wrote as follows (I'm repeating what you write to make sure I got it all right).

But I must have done a mistake somewhere, as the button isn't even shown in the text box. 

In the JS element at the very top, I now include

    var part1 = 0   ;

    var HTMLbutton1 = '<button onclick="button1()" >Continue.</button>'; 

    document.getElementById("buttonTxtBox1").innerHTML = HTMLbutton1

    function button1()

        {   

        part1 = 1; 

        setValue('p1_a', p1_a); 

        return false; 

        }

In the text box shown to participants I now include only one line:

<p id="buttonTxtBox1"> </p>

What did I misunderstand or why wouldn't the text box show me anything? 

I also don't understand why the errors in the console tell me.... 

Uncaught TypeError: Cannot set property 'innerHTML' of null 

Uncaught SyntaxError: Unexpected token '<'

On the click of the button, the var part1 should be changed to a value of 1, because I am using conditional displays of other elements on this stage based on part1. 

Thanks for your help!

Thomas

[Lucas Molleman]

Hi Thomas,

The LIONESS functionality record() does not work from within a JS function. This is for safety reasons: a corrupted loop could create a very large number of variables that break the database. You have to define it separately. So, the following works:

in the JS element:

record('var1', 0)

function button1() {
    var next_part = 1;
    setValue('var1',  123 );

    }

and in the text element

<input onclick="button1()" type="button" value="Continue." id="myButton">

It's probably good practice to give functions descriptive names not to conflate them with potentially 'special' JS variables. Not sure if that's true for 'button' but it might lead to unexpected behaviour; 'button1' would be safer but is probably also best avoided.

Hope this helps!

Lucas

 

On Mon, 5 Apr 2021 at 06:04, Thomas Dudek <tho...@behaviouralbydesign.com> wrote:

Steven and I just found an odd behavior. At least it appears odd to me... 

Steven figured out he could manipulate the display of a <div> directly on the same screen/stage using the following code. 

In the top JS element, he uses:

function button1() {  
    document.getElementById("Mess").innerHTML = "Rand # "+Math.random();
    return false; // I don't seem to need this in chrome, but it may be for another browser
}

Then in the text box he uses:

<button onclick="button1(); return false;" >Continue.</button>
<div id="Mess"></div>

This is interesting as it's working fine! The <div id=Mess"> is shown on the screen and on each button click the random number changes. So it seems that the click of the button invokes the function button() as it should. 

It seems that all the buttons I have used in the text box so far worked fine (I have no error message or warning), and they all do the same thing when I declare the function as Steven did. 

My button in the text box currently looks like this: 

<input id="myButton1" type="button" value="Continue." onclick="button1();">

But it appears that using the document.getElementbyId("Mess")innerHTML the way it's coded here is a very local output/display solution. 

The buttons still don't seem to create or manipulate variables with the record() or setValue() functions, even if I put the setValue() inside the button(). 

Moreover, the button() doesn't even seem to execute the next_part =1;  of the code inside the button(). 

It seems that for some reason the functions invoked in the HTML text box don't interact with the pre-coded LIONESS functions or the database at all. 

Could that be? Or what's going on? 

It's hard to improve anything without any error/warning message displayed in the console. 

Thanks for your help!

Thomas

On Monday, 5 April 2021 at 14:47:05 UTC+12 Thomas Dudek wrote:

Dear LIONESS team, dear community,

If anyone else can help us with this, that would be great. 

Both Steve and I would like to find a way to easily code a button that executes a function that saves some variables to the database, but the button should not change to a new stage, nor should it do anything else. 

Hope someone has a good idea.

My approach currently is as follows:

1. Define the function in a Javascript element at the top of the stage. Like so

function button() {

    var next_part = 1; 

    setValue('var1',  var1 );  //These variables are recorded using, e.g., record('var1', null) in a previous stage. 

    setValue('var2',  var2 ); 

    }

2. Create a text element with a button, as follows

<input onclick="button()" type="button" value="Continue." id="myButton"><br>

<script>

button();

</script>

Please click this button to see the next part. 

With this code, I see the button just fine, I can click the button, but nothing happens. Why? 

Thanks for your help,

Thomas

To view this discussion on the web, visit https://groups.google.com/d/msgid/lioness-lab/78269c8c-a82c-480f-936d-1e01fb40886bn%40googlegroups.com.

[Thomas Dudek]

Just in case someone is trying to figure this out, too. 

Here is a solution that works for me fine. 

Use and adjusted it to your needs as you wish. 

In the JS element on top of everything, I have: 

var x = 0 ;

function myFunction() {

  x = 1; 

}

function myFunction2() {

  x = 0; 

}

In text box 1, I have: 

<p><button id="myButton" type="button" class="button" onclick="myFunction()">Click Me</button></p>

Value of x is $x$.

In text box 2, I have: 

You clicked the button and the value of x changed to $x$.

<p><button id="myButton" type="button" class="button" onclick="myFunction2()">Go back</button></p>