| {% extends "two_columns.html" %} |
| |
| {% block title %} Touch Experiments {% endblock %} |
| |
| {% block head %} |
| {{ super() }} |
| <script language="javascript" type="text/javascript"> |
| var globalPropCount = 0; |
| var globalTreatCount = 0; |
| |
| function addProperty(adding_button) { |
| var treatNum = adding_button.id.replace(/[a-zA-Z_]/g, ''); |
| var newProp = document.getElementById('prop_template').cloneNode(true); |
| |
| newProp.id = 'treat' + treatNum + '_prop' + globalPropCount; |
| newProp.style.display = 'block'; |
| |
| children = newProp.childNodes; |
| for (var i = 0; i < children.length; i++) { |
| if (children[i].name == 'prop_name') |
| children[i].name = 'treat' + treatNum + '_prop' + |
| globalPropCount + '_name'; |
| if (children[i].name == 'prop_value') |
| children[i].name = 'treat' + treatNum + '_prop' + |
| globalPropCount + '_value'; |
| } |
| |
| var insertLocation = document.getElementById('treat' + |
| treatNum + '_props'); |
| insertLocation.parentNode.insertBefore(newProp, insertLocation); |
| |
| globalPropCount += 1; |
| } |
| |
| function addTreatment() { |
| var new_treat = document.getElementById('treat_template').cloneNode(true); |
| new_treat.id = 'treat' + globalTreatCount; |
| new_treat.style.display = 'block'; |
| |
| children = new_treat.childNodes; |
| for (var i = 0; i < children.length; i++) { |
| if (children[i].id == 'treat_props') |
| children[i].id = 'treat' + globalTreatCount + '_props'; |
| if (children[i].name == 'treat_name') |
| children[i].name = 'treat' + globalTreatCount + '_name'; |
| if (children[i].id == 'treat_add_prop') |
| children[i].id = 'treat' + globalTreatCount + '_add_prop'; |
| } |
| |
| var insertLocation = document.getElementById('treatments'); |
| insertLocation.parentNode.insertBefore(new_treat, insertLocation); |
| |
| addProperty(document.getElementById('treat' + globalTreatCount + |
| '_add_prop')); |
| globalTreatCount += 1; |
| } |
| |
| function deleteOption(delete_button) { |
| to_delete = delete_button.parentNode; |
| to_delete.parentNode.removeChild(to_delete); |
| } |
| |
| window.onload = function() { addTreatment();}; |
| </script> |
| {% endblock %} |
| |
| {% block first_column %} |
| <h1> Salsa </h1> |
| <p> |
| Welcome to Salsa, the Touch Experiment platform. You should see a list of |
| your previously created experiments below. You can click on any of them to |
| review their details. If you would like to start a new experiment, refer |
| to the form to the right. |
| </p> |
| |
| <p> |
| All experiments are defined as a collection of "treatments" that the user |
| is exposed to and then ranks. Each treatment is a customizable set of |
| xinput properties that are set to the given values to modify how the input |
| device works. The user then tries each in turn for their experiment before |
| supplying their feedback. |
| </p> |
| |
| <h1> Your experiments </h1> |
| <ul> |
| {% for exp in experiments %} |
| <li> <a href="/view?exp_key={{ exp.key() }}"> |
| {{ exp.name }} |
| </a> </li> |
| {% endfor %} |
| </ul> |
| {% endblock %} |
| |
| {% block second_column %} |
| <h1> Create a new experiment </h1> |
| <form name="create" action="create" method="post"> |
| <h2> Experiment Overview </h2> |
| |
| <table> |
| <tr> |
| <td>Experiment Name (public):</td> |
| <td><input type="text" name="exp_name"></td> |
| </tr> |
| <tr> |
| <td>Description (private):</td> |
| <td><textarea rows="5" cols="30" name="exp_description"></textarea></td> |
| </tr> |
| <tr> |
| <td>Participant Instructions:</td> |
| <td> |
| <textarea rows="5" cols="30" name="exp_instructions"></textarea> |
| </td> |
| </tr> |
| <tr> |
| <td>Device(s):</td> |
| <td><input type="text" name="exp_device"></td> |
| </tr> |
| <tr> |
| <td>Experiment Type:</td> |
| <td> |
| <input type="radio" name="exp_type" value="xinput"> |
| Xinput Properties<br> |
| <input type="radio" name="exp_type" value="chrome-gestures"> |
| Chrome Gestures<br> |
| </td> |
| </tr> |
| </table> |
| |
| <h2> Treatments </h2> |
| <div class="rectangle" id="treat_template" style="display:none"> |
| <a href="javascript:void(0)" class="delete" onclick="deleteOption(this)"> |
| X |
| </a> |
| |
| Treament Name: <input type="text" name="treat_name"> <br /><br /> |
| <ul id="treat_props"> |
| <li id="prop_template" style="display:none"> |
| Property Name: <input type="text" name="prop_name"> |
| Value: <input type="text" name="prop_value"> |
| <a href="javascript:void(0)" onclick="deleteOption(this)"> X </a> |
| </li> |
| </ul> |
| <a href="javascript:void(0)" id="treat_add_prop" |
| onclick="addProperty(this)"> |
| Add another property... |
| </a> |
| </div> |
| |
| <span id="treatments"> </span> |
| <a href="javascript:void(0)" onclick="addTreatment();"> |
| Add another Treatment... |
| </a> |
| |
| <p> <input type="submit" value="Create"> </p> |
| </form> |
| |
| {% endblock %} |