I am using the "Survey Link" template to create a project on Mechanical Turk.
I am running an A/B test. I would like to direct 50% of workers to one link, and 50% to another link.
How do I do this?
From the "Design Layout" page, click on "Source". This will let you edit the html/javascript/css for the survey.
You'll find a <table> element with a <tbody> element. Change the <tbody> element to this:
<tbody>
<tr class="survey-one">
<td><label>Survey link:</label></td>
<td><a class="dont-break-out" href="http://link-to-survey-1">http://link-to-survey-1</a></td>
</tr>
<tr class="survey-two">
<td><label>Survey link:</label></td>
<td><a class="dont-break-out" href="http://link-to-survey-2">http://link-to-survey-2</a></td>
</tr>
</tbody>
This simply adds another row to the table for the link for your second survey. Note the link-to-survey-1 and link-to-survey-2 that you'll need to replace with your own links.
A bit lower in the file, you'll see the <style> element. Add this to it:
.survey-hidden {
display: none;
}
And a bit lower, you'll see a <script> element. At the bottom of it, right before the });, add the following javascript:
var surveyToHide = (Math.random() >= 0.5) ? '.survey-one' : '.survey-two';
$(surveyToHide).addClass('survey-hidden');
This randomly picks one of your suveys, and makes it hidden, so that the worker sees only one.
Related
I have a table header that looks like this:
I'm trying to recreate this table in bootstrap-vue. The raw HTML looks like this (simplified):
<table>
<thead>
<tr>
<th></th>
<th colspan="4">Group 1</th>
<th colspan="4">Group 2</th>
<!--etc-->
</tr>
<tr>
<th>Field</th>
<th>Median</th>
<!-- etc -->
</tr>
</thead>
<tbody><!-- actual data --></tbody>
</table>
The core b-table code will create the 2nd row easily/automatically. I'm trying to figure out how to jam the 1st row in there. As a little kicker, I need to be able to control the contents of the two group names (i.e. if they change a control somewhere, "Group 1" becomes "Group Foo").
I made a playground for anyone that needs a starting point for helping figure this out: https://codesandbox.io/s/p56y3y2lnx The goal in there would be to programmically add a 1st row that includes the group1name and spans the width of the table in one colspan.
As of version v2.0.0-rc.14 (released 2019-03-08) you can now add additional rows above the header using the slot thead-top.
For your example, you would place the following code inside of the b-table tag:
<template slot="thead-top" slot-scope="data">
<tr>
<th></th>
<th colspan="3">Group 1</th>
<th colspan="4">Group 2</th>
<th colspan="4"></th>
</tr>
</template>
Here's a reference to the new feature: https://bootstrap-vue.js.org/docs/components/table/#adding-additional-rows-to-the-header
I was unable to find a clean way to achieve the results I wanted, so I ended up with something more hacky.
On b-table you can add an input event, so I did that to know when the table was finished loading.
HTML:
<b-table #input="tableLoaded" ref="table"></b-table>
then in my methods:
tableLoaded() {
if (!this.$refs.table) {
return;
}
var headers = this.$refs.table.$el.querySelectorAll('thead tr');
if (headers.length > 1) {
return;//nothing to do, header row already created
}
var topHeader = document.createElement('tr');
topHeader.innerHTML =
'<th></th>'+
'<th colspan="3">Group 1</th>'+
'<th colspan="4">Group 2</th>'+
'<th colspan="4"></th>';
headers[0].parentNode.insertBefore(topHeader, headers[0]);
}
I'd be happy to accept a cleaner solution.
I am using angularJS to display my result set into a table, that is filterable with totals etc. I was wondering if it would be possible to display a value based on another value if it is = to something. here is an example:
<tr ng-repeat="c in data">
<td>{{c.type}}</td> //expects either 'fixed' or 'hourly'
<td>{{c.fixed_rate}}</td>
<td>{{c.hourly_rate}}</td>
</tr>
Therfore are you able to only display the fixed value if type is fixed, and hourly if the type is hourly without using any JQuery to hide elements?
My mind is kind of stumped on this as I am just a few months in with angular.
Data is pulled from a database* so if there is an SQL option I am all for it.
You could do something like this:
<tr ng-repeat="c in data | filter: filterHourlyOrFixed">
<td>{{c.type}}</td>
<td ng-if="c.type == 'fixed'">{{c.fixed_rate}}</td>
<td ng-if="c.type == 'hourly'">{{c.hourly_rate}}</td>
</tr>
If you want to filter by only those two values, add this function to your controller:
$scope.filterHourlyOrFixed = function (item) {
return item.type === 'fixed' || item.type === 'hourly';
};
If you do not want to filter by the value, remove | filter: filterHourlyOrFixed from the ng-repeat.
Also, when you have some time, do a little reading through the docs for ngIf, ngShow, ngHide, and ngFilter. You'll probably be using these repeated. Also, pay attention to the differences in how ng-if, ng-show, and ng-hide manipulate the DOM to achieve similiar results.
The differences are subtle, but important.
Use ng-if to remove or recreate parts of the DOM based on an expression. for example:
<tr ng-repeat="c in data">
<td>{{c.type}}</td> //expects either 'fixed' or 'hourly'
<td ng-if="c.type=='fixed'">{{c.fixed_rate}}</td>
<td ng-if="c.type=='hourly'">{{c.hourly_rate}}</td>
</tr>
You could also use a filter, if you are rendering identical DOM but want to exclude certain elements.
You could try something like this:
<tr ng-repeat="c in data">
<td ng-if="c.type =='fixed'">Fixed</td>
<td ng-if="c.type =='hourly'">Hourly</td>
<td ng-if="c.type =='fixed'">{{c.fixed_rate}}</td>
<td ng-if="c.type =='hourly'">{{c.hourly_rate}}</td>
</tr>
Hope this helps!
http://embed.plnkr.co/Wes1Uf1OCCmKYa5wTP5s/preview
I have created an HTML Table. I need to display this table only when a button is clicked. Could some one suggest how to achieve this?
Regards
Giri
You can use jquery and attached an handler.
for example
in html:
<a class="button-link" href="javascript:void(0);">link</a>
<table class='hidden-table'>
<tr>
<th>id</th><th>name</th>
</tr>
<tr>
<td>1</td><td>Mr Awesome</td>
</tr>
</table>
in css:
.hidden-table{
display:none;
}
in js/jquery
$('.button-link').on('click',function(){
$('.hidden-table').show()
})
use the css to hide the table first and then upon clicking on the link it will show the table.
You could use Jquery, from here http://jquery.com/download/ .
After installing, you could use the following syntax:
$('#idofthebutton').click(function(){
$('#idofthetable').toggle();
});
I need to apply a different class to a <tr> according to the $index of the repeat directive. For example
<table>
<tr ng-repeat="model in list" class="xxx">
<td>...</td>
<tr>
</table>
I need to apply a different style to <tr> depending on whether the index is even and odd.
How could I solve this?
Normally you would use ngClassOdd (http://docs.angularjs.org/api/ng.directive:ngClassOdd) and ngClassEven (http://docs.angularjs.org/api/ng.directive:ngClassEven) directives like this:
<tr ng-repeat="item in items" ng-class-odd="'class1'" ng-class-even="'class2'">
Here is the jsFiddle: http://jsfiddle.net/pkozlowski_opensource/hNHJ4/1/
Unfortunately there is an issue where the mentioned directives are not working correctly when rows are removed: https://github.com/angular/angular.js/issues/1076
As a work around you can use the ngClass directive (http://docs.angularjs.org/api/ng.directive:ngClass) with the $index variable exposed by a repeater:
<tr ng-repeat="item in items" ng-class="{class1 : $index%2==0, class2 : !($index%2==0)}">
Here is the jsFiddle: http://jsfiddle.net/pkozlowski_opensource/am7xs/
It is not super-clean, but could be improved (for example, by exposing a function in a root scope, something like:
ng-class="getClass($index,'class1','class2')"
till the mentioned bug is fixed
If this is just for styling you can just use CSS
tr:nth-child(odd) { ... }
tr:nth-child(even) {...}
see http://jsfiddle.net/5MSDC/ for an example
I am trying to replace a table with my own table using grease monkey. The page that has the table has 2 tables with the same class and no IDs.
I need to replace only the second table (with my own table) and do nothing to the first table. There is nothing that really makes the second table unique from the first table, so the only thing I can think of is trying to add a DIV around the second table, but cant figure it out.
Any ideas? Heres the page code:
<h3>Table 1</h3>
<table class="details" border="1" cellpadding="0" cellspacing="0">
<tbody><tr>
<th>1</th>
<td>2</td>
</tr>
</tbody></table>
<h3>Table 2</h3>
<table class="details" border="1">
<tbody><tr>
<th>1</th>
<td>2</td>
</tr><tr>
<th>3</th>
<td>4</td>
</tr>
</tbody></table>
You can use xpath to find the second tables, and do something with it. The xpath expression would be (//table[#class="details"])[2]. Below I added an example which uses (//pre)[1] instead, this will find the first code block on this page, I will hide it as an example. So this hides the page code from your question. (//pre)[2] will hide my script.
See Also here for a tutorial how to use xpath.
// ==UserScript==
// #name so-test
// #namespace test
// #include http://stackoverflow.com/questions/4635696/use-greasemonkey-to-remove-table
// ==/UserScript==
// find first <pre> on this page
var xpathResult = document.evaluate('(//pre)[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
var node=xpathResult.singleNodeValue;
// now hide it :)
node.style.display='none';