| {% extends "two_columns.html" %} |
| |
| {% block title %} Experiment Participation {% endblock %} |
| |
| {% block head %} |
| {{ super() }} |
| |
| <script language="javascript" type="text/javascript"> |
| function submitReview() { |
| var keys = [ |
| {% for treatment in treatments %} |
| '{{ treatment.key() }}', |
| {% endfor %} |
| ] |
| |
| // Go through the rank divs to find which treatments are in them |
| var container = document.getElementById('container'); |
| var ranking = ''; |
| var num_ranked = 0; |
| for (var i = 0; i < container.children.length; i++) { |
| var rank = container.children[i]; |
| var ties = ''; |
| for (var j = 0; j < rank.children.length; j++) { |
| var treatment_num = rank.children[j].innerHTML.replace(/[^0-9]/g, ''); |
| if (!treatment_num) |
| continue; |
| ties = ties + keys[treatment_num] + '='; |
| num_ranked = num_ranked + 1; |
| } |
| if (ties != '') |
| ranking = ranking + ties.slice(0, -1) + '>'; |
| } |
| |
| // Grab their feedback if they left any |
| var feedback_box = document.getElementById('feedback'); |
| var feedback = encodeURIComponent(feedback_box.value); |
| |
| // Make sure that all of the treatments got ranked |
| if (num_ranked != keys.length) { |
| alert('Please rank all of the treatments to continue.'); |
| return; |
| } |
| |
| // Build up a submit url and redirect to it |
| var submit_url = '/submit?exp_key={{ experiment.key() }}' |
| submit_url = submit_url + '&ranking=' + ranking.slice(0, -1); |
| submit_url = submit_url + '&feedback=' + feedback; |
| window.location = submit_url; |
| } |
| |
| function allowDrop(ev) { |
| ev.preventDefault(); |
| } |
| |
| function drag(ev) { |
| ev.dataTransfer.setData('source_id', ev.target.id); |
| } |
| |
| function drop(ev) { |
| ev.preventDefault(); |
| var target_id = ev.target.id; |
| // Confirm that you're not adding it to another rankable object |
| if (ev.target.className.indexOf('rankable') !== -1) |
| target_id = ev.target.parentNode.id; |
| |
| // Get the actual Elements for the source and target |
| var source_id = ev.dataTransfer.getData('source_id'); |
| var source = document.getElementById(source_id); |
| var target = document.getElementById(target_id); |
| target.appendChild(source); |
| unhighlight(target); |
| |
| // Add new empty ranks on either side |
| var container = target.parentNode; |
| var newRankBefore = target.cloneNode(); |
| var newRankAfter = target.cloneNode(); |
| newRankBefore.id = newRankBefore.id + 'b'; |
| newRankAfter.id = newRankAfter.id + 'a'; |
| container.insertBefore(newRankBefore, target); |
| container.insertBefore(newRankAfter, target.nextSibling); |
| |
| // Preform cleanup and cosmetic changes |
| removeExtraRanks(container); |
| adjustSizes(container); |
| removeUnneededStartingBox(); |
| } |
| |
| function removeUnneededStartingBox() { |
| // Check if there are any rankable objects remaining in the starting box |
| // If they've all been moved elsewhere, get rid of the arrow and box |
| var box = document.getElementById('starting_box'); |
| if (box) { |
| var num_remaining = box.innerHTML.search('rankable'); |
| if (num_remaining <= 0) { |
| box.parentNode.removeChild(box); |
| var arrow = document.getElementById('arrow'); |
| arrow.parentNode.removeChild(arrow); |
| } |
| } |
| } |
| |
| function removeExtraRanks(container) { |
| // Flatten any adjacent empty ranks into a single empty rank |
| for (var i = 0; i < container.children.length; i++) { |
| child = container.children[i]; |
| if (child.children.length) |
| continue; |
| nextChild = container.children[i + 1]; |
| while (nextChild && !nextChild.children.length) { |
| container.removeChild(nextChild); |
| nextChild = container.children[i + 1]; |
| } |
| } |
| } |
| |
| function adjustSizes(container) { |
| // Make the first and last ranks larger than the others |
| var numChildren = container.children.length; |
| for (var i = 0; i < numChildren; i++) { |
| child = container.children[i]; |
| if (!child || !child.className) |
| continue; |
| child.className = child.className.replace(/end/, ''); |
| if (i == 0 || i == numChildren - 1) { |
| child.className = child.className + ' end'; |
| } |
| } |
| } |
| |
| function highlight(rank) { |
| rank.className = rank.className + ' highlighted'; |
| } |
| |
| function unhighlight(rank) { |
| rank.className = rank.className.replace(/highlighted/, ' '); |
| } |
| |
| function update_characters_remaining() { |
| var remaining_field = document.getElementById('remaining_characters'); |
| var feedback_field = document.getElementById('feedback'); |
| var MAX_LEN = 800; |
| |
| if (feedback_field.value.length > MAX_LEN) |
| feedback_field.value = feedback_field.value.substring(0, MAX_LEN); |
| else |
| remaining_field.innerHTML = 'Characters remaining: ' + |
| (MAX_LEN - feedback_field.value.length) + |
| '/' + MAX_LEN; |
| } |
| </script> |
| {% endblock %} |
| |
| {% block first_column %} |
| <h1> {{ experiment.name }}: Participate </h1> |
| |
| <div class="warning"> |
| This experiment is for <font class="giant">{{ experiment.device }}</font> |
| <u>only</u>! If you are not currently on a <font class="giant"> |
| {{ experiment.device }}</font> please do not participate. |
| </div> |
| |
| {% if experiment.experiment_type == "chrome-gestures" %} |
| <p> |
| To try out this experiment, simply Copy/Paste the following cryptic url |
| into your address bar. |
| </p> |
| |
| <div class="command rectangle"> |
| chrome://salsa/# |
| {{- experiment|encode_experiment(treatments, properties) }} |
| </div> |
| {% else %} |
| <p> |
| To try out this experiment, simply press Ctrl + Alt + t to open a terminal |
| and paste in the cryptic command below. (Note that to paste into the |
| terminal you must either right click and press paste or use Ctrl + Shift |
| + v on your keyboard) |
| </p> |
| |
| <div class="command rectangle"> |
| try_touch_experiment |
| {{ experiment|encode_experiment(treatments, properties) }} |
| </div> |
| {% endif %} |
| |
| <p> |
| This will allow you to switch between the treatments and see which you |
| prefer. Try them each out by following the experiment-specific |
| instructions below. Once you have tried all of the treatments, use the |
| form on the right to rank your experiences. |
| </p> |
| |
| <p class="rectangle"> {{ experiment.instructions|safe }} </p> |
| |
| <p class="comment"> |
| Created {{ experiment.created }} by |
| <a href="mailto:{{ experiment.owner }}@google.com?cc=chromeos-tango@google.com"> |
| {{ experiment.owner }} |
| </a> |
| </p> |
| |
| |
| {% endblock %} |
| |
| {% block second_column %} |
| <h1> Rate your experiences </h1> |
| |
| {% if user|string in experiment.participants %} |
| <div class="error"> |
| <b>Error!</b> You have already completed this experiment. Subsequent |
| submissions will <b>overwrite</b> your previous rankings! |
| </div> |
| <script type="text/javascript"> |
| window.onload = function(){ alert('Error! you have already ' + |
| 'completed this experiment!'); } |
| </script> |
| {% endif %} |
| |
| {% if treatments|length > 2 %} |
| <p> |
| Drag the following blocks into the gray rectangle to sort the treatments |
| you just experienced from best to worst. |
| </p> |
| <p> |
| The better a treatment is, the higher it should be placed. If two |
| treatments were the same, you may place them next to each other. Don't |
| be shy if you couldn't decide between two of them. Ties provide valuable |
| information as well. |
| </p> |
| |
| <center> |
| <table><tr> |
| <td> |
| <table id="starting_box"> |
| {% for treatment in treatments %} |
| <tr><td> |
| <div class="rankable" id="test{{ loop.index0 }}" draggable="true" |
| ondragstart="drag(event)"> |
| Treatment {{ loop.index0 }} |
| </div> |
| </td></tr> |
| {% endfor %} |
| </table> |
| </td> |
| <td id="arrow"> |
| <div class="arrowbody"></div> |
| <div class="arrowhead"></div> |
| </td> |
| <td> |
| <table> |
| <tr><th>↑ Better ↑</th></tr> |
| <tr><td> |
| <div id="container" class="rank_container"> |
| <div id="rank1" ondragover="allowDrop(event)" ondrop="drop(event)" |
| ondragenter="highlight(this)" ondragleave="unhighlight(this)" |
| class="rank end"></div> |
| </div> |
| </td></tr> |
| <tr><th>↓ Worse ↓</th></tr> |
| </table> |
| </td> |
| </tr></table> |
| </center> |
| {% else %} |
| <form action="submit" method="get"> |
| <input type="hidden" name="exp_key" value="{{ experiment.key() }}"> |
| <p> |
| <input type="radio" name="ranking" |
| value="{{ treatments[0].key() }}>{{ treatments[1].key() }}"> |
| Treatment 0 is better |
| <br> |
| <input type="radio" name="ranking" |
| value="{{ treatments[0].key() }}={{ treatments[1].key() }}"> |
| They are the same |
| <br> |
| <input type="radio" name="ranking" |
| value="{{ treatments[1].key() }}>{{ treatments[0].key() }}"> |
| Treatment 1 is better |
| </p> |
| {% endif %} |
| |
| <p> |
| (Optional) If you have any comments you would like to include you may do |
| so below. |
| </p> |
| <p> |
| <textarea rows="3" cols="40" id="feedback" name="feedback" |
| onKeyUp="update_characters_remaining()" |
| onKeyDown="update_characters_remaining()"></textarea> |
| <div id="remaining_characters"></div> |
| </p> |
| |
| {% if treatments|length > 2 %} |
| <p><button name="submit" onclick="submitReview()">Submit</button></p> |
| {% else %} |
| <p><input type="submit"></p> |
| </form> |
| {% endif %} |
| |
| {% endblock %} |