dbauer-ets
commented
2 years ago Hello Philipp,
Here is a standalone working JavaScript code for the Global variable field (the script for the Random variables field will be identical). It is not 100% but close and would be, in my opinion, good enough for production.
It is not integrated into the question code, because it would take me more time as I am still not that good with PHP and I may need your help.
It was fun to do since I believe you told me that it would be very hard to do. :-). In fact, it is not very complicated.
You can try the code by putting it in an HTML (now Text) block in the quiz.
<!--
© 2022 Dominique Bauer
CC0 1.0 Universal Public Domain Dedication
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// $textareatext: Contents of the Global variable field
// $textareasplit: Array containing the contents of each line of the Global variable field
// n: line counter
// linenumbers: array containing the line numbers
var $textareatext = $("div#fitem_id_varsglobal textarea").text();
var $textareasplit = $textareatext.split("\n");
var n = 0;
const linenumbers = [];
$(document).ready(function() {
$textareasplit.forEach(line_numbers_define);
$("div#fitem_id_varsglobal textarea").css({"line-height":"22px","padding":"0 0 0 7px","font-size":"14px","margin":"0"});
$("div#fitem_id_varsglobal div:eq(0)").removeClass('col-md-3').addClass('col-md-2');
$("div#fitem_id_varsglobal div:eq(1)").css("padding-left","0");
$('<div id="line_numbers" style="color: #aaa;border: 1px solid transparent; width:50px;text-align:right;font-size:14px;padding:0 7px 0 0; line-height:22px;overflow: hidden;margin:0;"></div>').insertAfter("div#fitem_id_varsglobal div:eq(0)");
$("div#line_numbers").html(linenumbers);
setInterval(dynlineheight, 10);
var $divs = $('#id_varsglobal, #line_numbers');
var sync = function(e){
var $other = $divs.not(this).off('scroll'), other = $other.get(0);
var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);
});
$("div#fitem_id_varsglobal textarea").keyup(function(){
linenumbers.splice(0, linenumbers.length); // Remove all array elements.
$textareatext = $(this).val(); // Get contents of field on each keyup.
$textareasplit = $textareatext.split("\n");
n=0;
$textareasplit.forEach(line_numbers_define);
$("div#line_numbers").html(linenumbers);
});
function dynlineheight() {
// Make height of #line_numbers equal to that of #fitem_id_varsglobal textarea
var linenumbersheight = $("div#fitem_id_varsglobal textarea").height();
$("div#line_numbers").css("height",linenumbersheight+2)
}
function line_numbers_define(item, index) {
var item = item.trim(); // Remove white spaces (beginning and end of string).
var pattern = /^#/; // First character is #.
var result = item.match(pattern);
if ( item == "" || result == "#" ) { // If blank line or comment.
linenumbers[index] = "<br>"
} else {
n = n + 1;
linenumbers[index] = n+"<br>"
}
}
</script>
PhilippImhof
Hello Philipp,
I started working on a small script for line numbering for the Random variables and Global variables fields. So far it's been pretty easy, but with programming you never know and I could get stuck at any time. Anyway, here's what it might look like: