Formatting problem with Form in Pavlovia

Online experiments
1

URL of experiment: The experiment is in pilot mode, but I can provide a 1-hour link if anyone is interested.

Description of the problem:

I have inserted a form into my experiment that asks participants which German Bundesland they are from. This works fine in PsychoPy, but the formatting renders it unusable in Pavlovia. Please see the screenshots; the first is the problem in Pavlovia and the second is how it should look, ie how it looks in PsychoPy. (The differences in background color, although not ideal, can be ignored). Interestingly, the options are also in reverse order in Pavlovia.

Screen Shot 2021-06-16 at 1.27.30 PM
Screen Shot 2021-06-16 at 1.27.30 PM2264×1548 227 KB

Screen Shot 2021-06-16 at 1.33.33 PM
Screen Shot 2021-06-16 at 1.33.33 PM2880×1800 165 KB

I’ve read various things about forms not working/now working in Pavlovia. I’m not sure if this is a problem that can be solved or if it is just a case of “forms are in beta, good luck.”

I’d be very grateful for any help.

2

I’m currently using embedded html instead of forms and have created an app to convert PsychoPy form csv files to html

https://moryscarter.com/vespr/formtohtml.php

3

The formtohtml function isn’t working for me (I’m not getting any output). This is what I’m pasting in:

index itemText type options ticks tickLabels layout itemColor itemWidth responseColor responseWidth
1 In welchem Bundesland sind Sie aufgewachsen? choice “Baden-Württemberg Bayern Berlin Brandenburg Bremen Hamburg Hessen Mecklenburg-Vorpommern Niedersachsen Nordrhein-Westfalen Rheinland-Pfalz Saarland Sachsen Sachsen-Anhalt Schleswig-Holstein Thüringen” vert black 0.5 black 0.5

Is that the correct format?

Thanks!

4

Please could you upload your csv file and I’ll have a go myself.

5

BundeslandB.csv (411 Bytes)

6

Here’s the html that creates

  <!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','1024')*.8;
	var yRes = getUrlParam('yRes','768')*.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: #4CAF50;
		border: none;
		color: white;
		padding: 20px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 40px;
		margin: 4px 2px;
		border-radius: 12px;
	}
-->
</style>
</head>
<body id="bodyForm">
	<script>
		document.getElementById('bodyForm').style = "width: " + xRes + "px; font-family: Arial, Helvetica, sans-serif; justify-content: left; background-color: grey; color: white; font-size: "+ yRes +"px";
	</script>
	<form name="form1" method="post" action="">
  <table border="0" cellpadding="5">
  
<tr><td valign="top">In welchem Bundesland sind Sie aufgewachsen?</td></td><td><select name="Q1" class="style1"><option value=""><option><option value="1">Baden-Württemberg</option>
<option value="2"> Bayern</option>
<option value="3"> Berlin</option>
<option value="4"> Brandenburg</option>
<option value="5"> Bremen</option>
<option value="6"> Hamburg</option>
<option value="7"> Hessen</option>
<option value="8"> Mecklenburg-Vorpommern</option>
<option value="9"> Niedersachsen</option>
<option value="10"> Nordrhein-Westfalen</option>
<option value="11"> Rheinland-Pfalz</option>
<option value="12"> Saarland</option>
<option value="13"> Sachsen</option>
<option value="14"> Sachsen-Anhalt</option>
<option value="15"> Schleswig-Holstein</option>
<option value="16"> Thüringen</option>
</select></td></tr></tr> 			<tr>
				<td colspan="2" style="text-align:right"><input type="submit" name="Submit" value="Submit"  class="button"></td>
			</tr>

 </table></form></body></html>
 </body>
</html>
7

Thanks very much.

Sorry for the stupid question: It’s not clear to me from your demo where I should insert this. In coder view or directly in Pavlovia?

8

The needs to be a separate text file with an html extension in the same folder as your psyexp file, the name of which is used in the coder view.

9

BTW, to do this I simply pasted from your CSV file in Excel to my web app.

10

Could you point me towards a demo or explanation of exactly how to do this (text file with html extension in coder)? I’m not sure exactly what you mean by “used in the coder view.”

Thanks for all your help!

11

Have you looked at my demographics demo?

12

That did the trick! Thanks!