In this article , you will find an example  on how to allow the agent to provide feedback on the interview at any time during the call  .

Create your permanent questions

First , create a chapter  and ident the questions you want to display on 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() + "'/><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>

 and 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;
}

You will have the following behaviour

For example , you can have a look into the 📥 attached  qex