I got a weird question on Amazon MTurk's html layout. There is unexpected space under <form> when using the crowd elements by AWS.
Here is a piece of demo code:
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form answer-format="flatten-objects">
<div>
<form>
<p> Some random question</p>
<input type="radio" name="q-1" value="1"> <label>Choice1</label>
<br>
<input type="radio" name="q-1" value="2"> <label>Choice2</label>
<br>
<input type="radio" name="q-1" value="3"> <label>Choice3</label>
</form>
</div>
<p> Some random text to test the space after `form` </p>
</crowd-form>
which produces a multi-choice question with a ton of spaces (the second pic is directly after the first one -- but I have to screenshot two separate ones as the space is too long).
However, when commenting out the crowd html line, everything seems just fine:
<!--<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>-->
<crowd-form answer-format="flatten-objects">
<div>
<form>
<p> Some random question</p>
<input type="radio" name="q-1" value="1"> <label>Choice1</label>
<br>
<input type="radio" name="q-1" value="2"> <label>Choice2</label>
<br>
<input type="radio" name="q-1" value="3"> <label>Choice3</label>
</form>
</div>
<p> Some random text to test the space after `form` </p>
</crowd-form>
which produces the following:
Does anyone know why this happens, and how I could fix it if I still want to use the crowd form? Thanks!
You should omit the <form> elements.
<crowd-form> takes care of all the form submission for you.
You need to include (not comment out) the Crowd HTML Elements script import:
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
Hope this helps.
Please let me know if you have additional questions.
Thank you,
Amazon Mechanical Turk
Related
I asked this question a month ago: I'm trying to put a <button> inside an <input type="radio">'s <label>
The answer I marked correct worked perfectly... for the desktop browsers I tested. Testing on my iPhone 6, both Safari and Chrome have the buttons unclickable.
Correct answer snippet copied below:
button {
pointer-events:none;
}
<h1>Choose A or B</h1>
<input type="radio" name="choice" value="A" id="a"><label for="a"><button type="button">A</button></label>
<input type="radio" name="choice" value="B" id="b"><label for="b"><button type="button">B</button></label>
Is there a solution that works for both smartphone AND desktop?
I could get rid of <input type=“radio”> and rewrite radio button behaviour in JavaScript from scratch, but I'm hoping I won't need to do that. Is there an easier way?
<h1>Choose A or B</h1>
<label>
<input type="radio" name="mode" value="create">
<span style="-webkit-appearance: button;">create table</span>
</label>
<label>
<input type="radio" name="mode" value="create">
<span style="-webkit-appearance: button;">create field</span>
</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Question 1</h2>
<div>
</div>
<div>
<input type="radio" name="name_radio1" value="value_radio1" onclick=$().hide(); />Audio Question
<input type="radio" name="name_radio1" value="value_radio2" onclick=$().hide(); />Image Question
<input type="radio" name="name_radio1" value="value_radio3" onclick=$().hide(); />Standard Question
</div>
<div align="center" style="padding:25px;width: 300px;">
<input name="question" size="35" class="standardQuestion" type="text" value="" />
<br>
<input name="audioFile" class="audioFile" type="file" />
<br>
<br>
<textarea name="message" rows="10" cols="20">
</textarea>
<br>
<input name="imageFile" class="imageFile" type="file" />
<br>
</div>
<div>
<h2>Question 2</h2>
<div>
</div>
<div>
<input type="radio" name="name_radio1" value="value_radio1" onclick=$().hide(); />Audio Question
<input type="radio" name="name_radio1" value="value_radio2" onclick=$().hide(); />Image Question
<input type="radio" name="name_radio1" value="value_radio3" onclick=$().hide(); />Standard Question
</div>
<div align="center" style="padding:25px;width: 300px;">
<input name="question" size="35" class="standardQuestion" type="text" value="" />
<br>
<input name="audioFile" class="audioFile" type="file" />
<br>
<br>
<textarea name="message" rows="10" cols="20">
</textarea>
<br>
<input name="imageFile" class="imageFile" type="file" />
<br>
</div>
<div>
`I am trying to add to an HTML Quiz editor started by someone else that allows me to add from 1 to n questions. Quiz questions can be based upon an audio recording, an image, or just plain text. If the question is an audio/image/text based question, I would need to only show the HTML form elements related to an audio/image/text based question. The questions on the quiz can be changed/updated/deleted by the user of the editor so an audio question could be changed to an image or text based question. If the question type is changed via a radio button, the appropriate controls for that question type need to be displayed.
For example...
Question 1
Radio ImageQuestion Radio AudioQuestion Radio TextQuestion
textbox 1 (Only show if Radio Button ImageQuestion is checked)
File (Only show if Radio Button AudioQuestion is checked)
textbox 2 (Only show if Radio Button TextQuestion is checked)
Question 2 (same elements as above)
....
Question N (same elements as above)
While each question will have the same HTML form elements, the data in each question should be independent so when I hide some control for question 1 since the user clicked on a specific radio button there, it should not impact what is diplayed for questions 2 to N.
The key constraint I would like to work with is not use id's since the code that I am working on is over halfway done and has been implemented without id's. And I could not hardcode the id's since I don't know how many of them will actually be needed. It would be a significant change to add id's but if that is the only reasonable way or clearly the best way that this can be accomplished, please let me know. Any advice on the best approach to take would be appreciated. Right now the code is using jquery/javascript and I would like to stick with that and basic html/css. I am speculating based upon my research that I may need to use code like .parent().find("a specific class") and the onclick event but I'm not sure if this is the right approach to take and is even feasible. Thanks.
Are you trying to do this without javascript?
Take this code for Example
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
It allows a user to select one button at a time, I was always under the impression that javascript was the answer to this type of a solution. So my question is, is there any embedded javascript in the HTML radio button and if not, where is the function coming from?
Its the Browser's duty to do that for us.
Why?
Because the behavior is stated in the spec:
http://www.w3.org/TR/html/forms.html#radio-button-state-(type=radio)
Can't figure out why the below piece of code makes the textfield disappear upon page refresh (when 'No' radio button selected).
Also, after the page is refreshed the default radio button doesn't get selected.
Forcing refresh, fixes the problem, though.
Any ideas?
<html>
<body>
<div class="editfield">
<div id="field_1">
<label>
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">Yes
</label>
<label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<body onLoad="document.getElementById('radio-2_id').checked=false; document.getElementById('radio-1_id').checked=true;">
<div class="editfield">
<div id="field_1">
<input type="radio" checked="checked" name="radio-1" id="radio-1_id" value="Yes" onclick="document.getElementById('divUrl').style.display='none'">
<label for='radio-1_id'>
Yes
</label>
<input type="radio" name="radio-1" id="radio-2_id" value="No" onclick="document.getElementById('divUrl').style.display='block'">
<label for='radio-2_id'>
No
</label>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label>Website URL</label>
<input type="text" name="X" id="X_id" value="" />
</div>
</body>
</html>
just a short recap:
1. on page refresh the div should disappear (all css and js and html that was dynamically set / added is removed) and the selected radio button should be the first (Yes)
2. tested this on all major browser and it works
3. still can't figure out why it wasn't working on Mozilla and IE without the JS refresh
I moved the radio buttons out of the labels to see if that impacted the refresh in any way and it didn't. Also, I removed an extra </div> that was in the original code.
The page refresh will initiate the page in its' original state. So the
style="display:none"
will be reactivated on the div and will be hidden and the "Yes" button will also be reenabled
what i did have a textarea insert number first ,0 make it readonly
then it will not disappear on refresh,to insert document.getElementById("demo").readOnly=false,and true to enable readonly
I have looked at this: Radio Button change event not working in chrome or safari and it didn't give me the solution I was looking for. I have a simple form with radio buttons and an onClick="jarod();" and jarod() is a function called above. See Code:
<script type="text/javascript">
function jarod()
{
alert('yes');
}
</script>
The HTML form is:
<form id="form_601799" class="appnitro" method="post" action="/formbuilder/view.php">
<div class="form_description">
<h2>Input Information to Prepare Answer</h2>
<p></p>
</div>
<ul >
<li id="li_1" >
<label class="description" for="element_1">Number of paragraphs: </label>
<div>
<input id="element_1" name="element_1" class="element text small" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_2" >
<label class="description" for="element_2">Paragraph 1: </label>
<span>
<input id="element_2_1" name="element_2" class="element radio" type="radio" value="1" />
<label class="choice" for="element_2_1" >Admit</label>
<input onClick="jarod();" id="element_2_2" name="element_2" class="element radio" type="radio" value="2" />
<label class="choice" for="element_2_2">Qualified Admission</label>
<input id="element_2_3" name="element_2" class="element radio" type="radio" value="3" />
<label class="choice" for="element_2_3">Deny</label>
<input id="element_2_4" name="element_2" class="element radio" type="radio" value="4" />
<label class="choice" for="element_2_4">Qualified Denial</label>
<input id="element_2_5" name="element_2" class="element radio" type="radio" value="5" />
<label class="choice" for="element_2_5">Legal Conclusion</label>
</span>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="601799" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
As you can see there is onclick="jarod();" attempting to call the javascript function. This does nothing when the onclick="jarod();" is in the input tag section but if I move it to the label section like:
<label class="choice" for="element_2_1" onClick="jarod();">Admit</lable>
This "label" works just fine in Chrome. I'm going to use this to reveal a text area if the Qualified Admission or Qualified Denial is selected.
Thanks for any help.
PS - I also tried putting the onclick="jarod();" in the text field and it works just fine in Chrome. What is the deal with radio buttons and Chrome?
EDIT: This is frustrating. I used phpform.org to create the form to save me time. It uses this DOCTYPE at the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
When I use this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
It works just fine. Someone commented about it being a form of XHTML / XML and sure enough it is. At least I was able to spend the last few hours sleeping instead of sitting at the computer trying to figure out the solution!
Bad thing is now, my CSS doesn't look right. I think I'd rather have a formatting issue than a programming issue.
jarod
Is your document written as any XML-based form of HTML? Because if so, then onClick will be ignored, as names are case-sensitive. If you put your whole document up, then someone can test everything within the context of the original document, and someone can definitely give you a definitive answer (I'm going to bed pretty soon).
For now, my answer is try to change onClick to onclick in the attribute of the radio button.
Also, you need to put onclick inside of every single radio button, not just one of them. The other radio buttons are separate HTML elements, and so the onclick event from one of them does not apply to any of the others.
As you havent provided your DOCTYPE issue here might be onclick or onClick
you should check this.
onclick or onClick?
Also try
onclick="javascript:jarod();"
as of onclick for radio its working on chrome for OSX
here's a fiddle on that
http://jsfiddle.net/9efbR/
I had a similar issue with radio inputs (couldn't get onclick="" to work), and the solution has been changing onclick to onchange.