simplify css class management and internationalization of status strings (potentially) displayed to the user.
30 lines
982 B
HTML
30 lines
982 B
HTML
<section id="editamoleculeinput_${id}" class="editamoleculeinput">
|
|
<div class="script_placeholder" data-src="${applet_loader}"/>
|
|
|
|
% if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']:
|
|
<div class="${status.classname}" id="status_${id}">
|
|
% endif
|
|
|
|
<div id="applet_${id}" class="applet" data-molfile-src="${file}" style="display:block;width:500px;height:400px">
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<input type="hidden" name="input_${id}" id="input_${id}" aria-describedby="answer_${id}" value="${value|h}"/>
|
|
|
|
<button id="reset_${id}" class="reset">Reset</button>
|
|
|
|
<p id="answer_${id}" class="answer"></p>
|
|
|
|
<p class="status" aria-describedby="input_${id}">
|
|
${status.display_name}
|
|
</p>
|
|
<br/> <br/>
|
|
|
|
<div class="error_message" style="padding: 5px 5px 5px 5px; background-color:#FA6666; height:60px;width:400px; display: none"></div>
|
|
|
|
% if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']:
|
|
</div>
|
|
% endif
|
|
</section>
|