Fix exp-exit-survey: Restore help-text describing Databrary; align radio buttons with tops of labels; align withdrawal text with checkbox and make normal weight.

Author: Kim Scott

exp-player/addon/styles/components/exp-exit-survey.scss

@@ -4,6 +4,7 @@
 
 .exp-physics-exit-survey .extra-info {
     font-size: small;
+    font-weight: normal;
     color: rgb(95,95,95);
 }
 
@@ -12,3 +13,8 @@
     border-radius: 5px;
     border-color: rgb(95, 95, 95);
 }
+
+.exp-physics-exit-survey .radio-holder {
+    position:relative;
+    margin-top:-4px;
+}

exp-player/addon/templates/components/exp-exit-survey.hbs

@@ -14,16 +14,17 @@
         <label><i class="fa fa-star"></i> Would you like to share your video and other data from this session with authorized users of the secure data library Databrary? </label>
         <div class="radio">
             <label>
-              {{radio-button value="no" checked=databraryShare name="databraryShare"}}
+              <span class="radio-holder">{{radio-button value="no" checked=databraryShare name="databraryShare"}}</span>
               No
             </label>
         </div>
         <div class="radio">
             <label>
-             {{radio-button value="yes" checked=databraryShare name="databraryShare"}}
+             <span class="radio-holder">{{radio-button value="yes" checked=databraryShare name="databraryShare"}}</span>
              Yes
            </label>
         </div>
+        <div class="extra-info">Only authorized researchers will have access to information in the library. Researchers who are granted access must agree to maintain confidentiality and not use information for commercial purposes. Data sharing will lead to faster progress in research on human development and behavior. If you have any questions about the data-sharing library, please visit <a href="https://nyu.databrary.org/" target="_blank">Databrary </a> or email [email protected]. </div>
         {{#if showValidation}}
         <p class="text text-danger">
             {{ validations.attrs.databraryShare.messages }}
@@ -33,7 +34,7 @@
         <label><i class="fa fa-star"></i> Use of video clips and images:</label>
         <div class="radio">
             <label>
-            {{radio-button value="private" checked=useOfMedia name="useOfMedia"}}
+            <span class="radio-holder">{{radio-button value="private" checked=useOfMedia name="useOfMedia"}}</span>
             <strong>Private:</strong> Video may only be viewed by authorized scientists
 	    {{#if (eq databraryShare 'yes')}}
 		(researchers working on the Lookit project and authorized Databrary users).
@@ -44,13 +45,13 @@
         </div>
         <div class="radio">
             <label>
-               {{radio-button value="scientific" checked=useOfMedia name="useOfMedia"}}
+               <span class="radio-holder">{{radio-button value="scientific" checked=useOfMedia name="useOfMedia"}}</span>
                <strong>Scientific and educational:</strong> Video may be shared for scientific or educational purposes. For example, we might show a video clip in a talk at a scientific conference or an undergraduate class about cognitive development, or include an image or video in a scientific paper. In some circumstances, video or images may be available online, for instance as supplemental material in a scientific paper.
              </label>
         </div>
         <div class="radio">
             <label>
-              {{radio-button value="public" checked=useOfMedia name="useOfMedia"}}
+              <span class="radio-holder">{{radio-button value="public" checked=useOfMedia name="useOfMedia"}}</span>
               <strong>Publicity:</strong> Please select this option if you'd be excited about seeing your child featured on the Lookit website or in a news article about this study! Your video may be shared for publicity as well as scientific and educational purposes; it will never be used for commercial purposes. Video clips shared may be available online to the general public.
             </label>
         </div>
@@ -61,7 +62,7 @@
         {{/if}}
         <hr>
         <label>Withdrawal of video data </label>
-        <label>{{input type="checkbox" checked=withdrawal name="withdrawal"}}<p class="extra-info">&nbsp;&nbsp;&nbsp; Every video helps us, even if something went wrong! However, if you need your video deleted (your spouse was discussing state secrets in the background, etc.), check here to completely withdraw your video data from this session from the study. Only your consent video will be retained and it may only be viewed by Lookit researchers; other video will be deleted without viewing.</p> </label>
+        <label>{{input type="checkbox" checked=withdrawal name="withdrawal"}}<span class="extra-info">&nbsp;&nbsp;&nbsp; Every video helps us, even if something went wrong! However, if you need your video deleted (your spouse was discussing state secrets in the background, etc.), check here to completely withdraw your video data from this session from the study. Only your consent video will be retained and it may only be viewed by Lookit researchers; other video will be deleted without viewing.</span> </label>
         <hr>
         <div class="form-group">
             <label>Your feedback:</label><br> {{textarea class="input-text" value=feedback name="feedback" rows=3 cols=40}}