In this article, you will find an example of how to allow CATI agents to provide feedback on their interviews at any point during their survey calls.

Create your permanent questions

Firstly, create a chapter and indent the questions you want to display at the bottom of the CATI screens.

Add in your internet template

In your internet template, add the following script in the footer:

<div style="position:fixed;bottom:0;text-align:left;background-color:white;padding-top:3px;padding-bottom:3px;width:100%">

<div id='navigationDerivation'><span id='navigationCursor' style='font-size: 1.2em;font-weight: bold;'>&nbsp;+&nbsp;&nbsp;</span>Press to open Feedback</div>
<ul id='askia-derivations'>
<div id="question"> Contact feedback</div></p>
<div>
<table border="0" align="left">
!! dim i
dim result=""

For i=1 to Feedback.responses.count
result = result + "<tr ><td width='10%'><input type='radio' id='choice(i)' name='_Feedback' value='"+ Feedback.Responses[i].InputValue() + "' " + On(Feedback.Answers Has Feedback.Responses[i],"checked","") + "/><label for='choice(i)'>"+ Feedback.Responses[i].caption+"</label></td></tr>"
next i
return result
!!
</tr>
<tr><td>&nbsp;</td></tr>
<tr>
<td span id="question"> Comments : </td><td><textarea aria-label='Text area' class='inputopen' name='_Open_feedback'>!!Open_feedback.InputValue()!!</textarea></td></tr>
</table>

</div>
</br>
</ul>
</div>

 Next in the CSS / head section . . .

#navigationDerivation {
margin: 0 auto;
padding: 5px 0 5px 10px;
border-radius: 3px;
background: rgb(108, 108, 108);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(108, 108, 108)), color-stop(100%, rgb(68, 68, 68)));
background: -webkit-linear-gradient(top, rgb(108, 108, 108) 0%, rgb(68, 68, 68) 100%);
background: linear-gradient(top, #6c6c6c 0%, #444444 100%);
-webkit-box-shadow: 0px 1px 0px 0px rgb(142, 142, 142) inset;
-moz-box-shadow: 0px 1px 0px 0px rgb(142, 142, 142) inset;
box-shadow: 0px 1px 0px 0px rgb(142, 142, 142) inset;
border: 1px solid rgb(0, 0, 0);
text-shadow: 0px -1px 0px rgb(0, 0, 0);
color: rgb(221, 221, 221);
/*font-weight: bold;*/
transition: all ease-in-out .1s;
font-size: 14px;
}
#navigationDerivation:hover {
color: #FFFFFF;
text-decoration: none;
-webkit-box-shadow: 0px 1px 0px 0px rgb(142, 142, 142) inset;
-moz-box-shadow: 0px 1px 0px 0px rgb(142, 142, 142) inset;
box-shadow: 0px 1px 0px 0px rgb(142, 142, 142) inset;
background: rgb(124, 124, 124);
background: -moz-linear-gradient(top, #7c7c7c 0%, #444444 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(124, 124, 124)), color-stop(100%, rgb(68, 68, 68)));
background: -webkit-linear-gradient(top, rgb(124, 124, 124) 0%, rgb(68, 68, 68) 100%);
cursor: pointer;
}

#navigationCursor {
color: #FFFFFF;
}
.select:hover {
cursor: pointer;
}
.default #askia-derivations {
background-color: #ffffff;
border-top: 1px solid transparent;
border-right: 1px solid #a1a7ad;
border-bottom: 1px solid #a1a7ad;
border-left: 1px solid #a1a7ad;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.askia-derivation {
width: 600px;
}

Then you should have the following behaviour . . .

You can have a look at an example in the 📥 attached QEX.