ProgZoo - User contributions [en-gb]

DOM Creating content

2024-10-15T08:53:54Z

Andr3w: /* Using functions */

<pre id='shellbody' data-qtp='DOM'></pre>

==Create Content==
<div class='qu'>
You can create a div element an set the content.

We use the document method '''createElement''' and the DOM node method '''append'''

<div class='imper'>Change the code so that it says 'Hello world'</div>
<pre class='usr'>
let e = document.createElement('div');
e.innerHTML = 'Hello';
document.body.append(e);
</pre>
<pre class='ans'>
let e = document.createElement('div');
e.innerHTML = 'Hello world';
document.body.append(e);
</pre>
</div>

==Create img==
<div class='qu'>
You can create a '''img''' element and set the '''src'''.
In this example you must set the '''src''' and the '''style''' of the new element '''a'''.
a.style = 'width:100px;border:solid;';
These are CSS properties.

<pre class='usr'>
let a = document.createElement('img');
a.src = '/flags/fr.png';
document.body.append(a);
</pre>
<pre class='ans'>
let a = document.createElement('img');
a.src = '/flags/fr.png';
a.style = 'width:100px;border:solid;';
document.body.append(a);
</pre>
</div>

==Create multiple elements==
<div class='qu'>
*You can add several elements to the document.body.
*You can add elements to other elements.
*Change this code to match the model answer
*Can you see why the flag does not show?
<pre class='usr'>
let a = document.createElement('div');
a.innerHTML = 'Germany, ';
let b = document.createElement('i');
b.innerHTML = 'Berlin';
a.appendChild(b);
document.body.append(a);
let c = document.createElement('img');
c.src = '/flags/de.png';
c.style = 'width:100px';
</pre>
<pre class='ans'>
let a = document.createElement('div');
a.innerHTML = 'Germany, ';
let b = document.createElement('i');
b.innerHTML = 'Berlin';
a.append(b);
document.body.appendChild(a);
let c = document.createElement('img');
c.src = '/flags/de.png';
c.style = 'width:100px';
document.body.append(c);
</pre>
</div>

==Setting complex innerHTML==
<div class='qu'>
You can put more complex HTML into an element.
The backticks ` ` can span many lines.
<div class='imper'>Make the flags bigger - you can set the height to 2ex</div>
<pre class='usr'>
let a = document.createElement('div');
a.innerHTML = `
<img src='/flags/gr.png' style='height:1ex'>
Greece <i>Athens</i>`;
document.body.appendChild(a);
let b = document.createElement('div');
b.innerHTML = `
<img src='/flags/it.png' style='height:1ex'>
Italy <i>Rome</i>`;
document.body.appendChild(b);
</pre>
<pre class='ans'>
let a = document.createElement('div');
a.innerHTML = `
<img src='/flags/gr.png' style='height:2ex'>
Greece <i>Athens</i>`;
document.body.appendChild(a);
let b = document.createElement('div');
b.innerHTML = `
<img src='/flags/it.png' style='height:2ex'>
Italy <i>Rome</i>`;
document.body.appendChild(b);
</pre>
</div>

==Using functions==
<div class='qu'>
* You should avoid copying chunks of code.
* A well chosen function can help avoid that.
* Notice how ''string interpolation'' allows you to include variables in the string.
<pre class='usr'>
function addCountryDiv(name, capital, flag){
let a = document.createElement('div');
a.innerHTML = `
<img src='/flags/${flag}.png'
style='height:2ex;'>
${name}`;
document.body.appendChild(a);
}

addCountryDiv('China', 'Beijing', 'cn');
addCountryDiv('Japan', 'Tokyo', 'jp');
addCountryDiv('South Korea', 'Seoul', 'kr');
</pre>
<pre class='ans'>
function addCountryDiv(name, capital, flag){
let a = document.createElement('div');
a.innerHTML = `
<img src='/flags/${flag}.png'
style='height:2ex;border:solid;'>
${name} <i>${capital}</i>`;
document.body.appendChild(a);
}

addCountryDiv('China', 'Beijing', 'cn');
addCountryDiv('Japan', 'Tokyo', 'jp');
addCountryDiv('South Korea', 'Seoul', 'kr');
</pre>
</div>

==Write the schedule==
We want to show the start time and end time for each event.
<div class='qu'>
<pre class='usr'>
function addSchedule(name, timeStart, timeEnd){
let a = document.createElement('div');
a.innerHTML = `${name}`;
document.body.appendChild(a);
}

addSchedule('Lecture', '13:00', '14:00');
addSchedule('Tutorial', '14:00', '15:30');
addSchedule('Lecture', '15:30', '16:00');
</pre>
<pre class='ans'>
function addSchedule(name, timeStart, timeEnd){
let a = document.createElement('div');
a.innerHTML = `${name} ${timeStart} ${timeEnd}`;
document.body.appendChild(a);
}

addSchedule('Lecture', '13:00', '14:00');
addSchedule('Tutorial', '14:00', '15:30');
addSchedule('Lecture', '15:30', '16:00');
</pre>
</div>

==Write the schedule with Edinburgh time==
You can use this function to calculate Edinburgh time:
<pre>
function edinburgh(t){
let hm = t.split(':');
let m = 60*parseInt(hm[0])+parseInt(hm[1]);
let e = m - 60*5.5;
return (Math.floor(e/60).toString().padStart(2,'0'))+':'+
((e%60).toString().padStart(2,'0'));
}
</pre>
The times shown are in the Yangon time zone. Show the Edinburgh time in brackets. Edinburgh time is 5.5 hours earlier than Yangon time.
<div class='qu' data-width=280>
<pre class='usr'>
function edinburgh(t){
let hm = t.split(':');
let m = 60*parseInt(hm[0])+parseInt(hm[1]);
let e = m - 60*5.5;
return (Math.floor(e/60).toString().padStart(2,'0'))+':'+
((e%60).toString().padStart(2,'0'));
}

function addSchedule(name, timeStart, timeEnd){
let a = document.createElement('div');
a.innerHTML = `${name} ${timeStart} ${edinburgh(timeStart)}`;
document.body.appendChild(a);
}

addSchedule('Lecture', '13:00', '14:00');
addSchedule('Tutorial', '14:00', '15:30');
addSchedule('Lecture', '15:30', '16:00');
</pre>
<pre class='ans'>
function edinburgh(t){
let hm = t.split(':');
let m = 60*parseInt(hm[0])+parseInt(hm[1]);
let e = m - 60*5.5;
return (Math.floor(e/60).toString().padStart(2,'0'))+':'+
((e%60).toString().padStart(2,'0'));
}

function addSchedule(name, timeStart, timeEnd){
let a = document.createElement('div');
a.innerHTML = `${name} ${timeStart} (${edinburgh(timeStart)}) ${timeEnd} (${edinburgh(timeEnd)})`;
document.body.appendChild(a);
}

addSchedule('Lecture', '13:00', '14:00');
addSchedule('Tutorial', '14:00', '15:30');
addSchedule('Lecture', '15:30', '16:00');
</pre>
</div>

==Using a loop==
<div class='qu'>
* Another way to avoid copying chunks of code is to use a loop.
<pre class='usr'>
let cl = [
{name:'France', capital:'Paris', flag:'fr'},
{name:'Italy', capital:'Rome', flag:'it'},
{name:'Germany', capital:'Berlin', flag:'de'}
];
for(let c of cl){
let a = document.createElement('div');
a.innerHTML = `
${c.name}`;
document.body.appendChild(a);
}
</pre>
<pre class='ans'>
let cl = [{name:'France', capital:'Paris', flag:'fr'},
{name:'Italy', capital:'Rome', flag:'it'},
{name:'Germany', capital:'Berlin', flag:'de'}];
for(let c of cl){
let a = document.createElement('div');
a.innerHTML = `
<img src='/flags/${c.flag}.png'
style='height:2ex;border:solid'>
${c.name} <i>${c.capital}</i>`;
document.body.appendChild(a);
}

</pre>
</div>

==Radio buttons==
<div class='qu'>
* You can create HTML elements such as a radio button:
<pre>
<label><input type=radio name='country'>France</label>
</pre>
<pre class='usr'>
let cl = [
{name:'France', capital:'Paris', flag:'fr'},
{name:'Italy', capital:'Rome', flag:'it'},
{name:'Germany', capital:'Berlin', flag:'de'}
];
for(let c of cl){
let d = document.createElement('div');
d.innerHTML = c.name;
}
</pre>
<pre class='ans'>
let cl = [{name:'France', capital:'Paris', flag:'fr'},
{name:'Italy', capital:'Rome', flag:'it'},
{name:'Germany', capital:'Berlin', flag:'de'}];
for(let c of cl){
let a = document.createElement('div');
a.innerHTML = `
<label><input type=radio name='country'>${c.name}</label>`;
document.body.appendChild(a);
}

</pre>
</div>

==Radio buttons with images==
<div class='qu'>
* Add a flag to each radio button:
<pre>
<label><input type=radio name='country'>France</label>
</pre>
<pre class='usr'>
let cl = [
{name:'France', capital:'Paris', flag:'fr'},
{name:'Italy', capital:'Rome', flag:'it'},
{name:'Germany', capital:'Berlin', flag:'de'}
];
</pre>
<pre class='ans'>
let cl = [{name:'France', capital:'Paris', flag:'fr'},
{name:'Italy', capital:'Rome', flag:'it'},
{name:'Germany', capital:'Berlin', flag:'de'}];
for(let c of cl){
let a = document.createElement('div');
a.innerHTML = `
<label><input type=radio name='country'><img style='height:20px' src=/flags/${c.flag}.png></label>`;
document.body.appendChild(a);
}

</pre>
</div>

Quiz - HTML

User:Andr3w

2023-01-09T14:53:36Z

Andr3w: /* Notes on registering students */

==Current activity==
<div id='students'></div>

https://progzoo.net/MediaWiki:Common.css

==Notes on registering students==
When linking from moodle set the following URL parameters:
*course
** Course ID number
*userName
** user full name
*institution
** Institution
[[File:moodle_snap.png|upright|Moodle Snapshot]]

==Notes on question type '''qtp'''==

Set the question type using
<pre id='shellbody' data-qtp='DOM'></pre>

* canvas
** in this case we create a canvas element, call drawFlag with the 2d context, report the bitmap to score.php
* DOM
** in this question type after usr.js has executed pass document.body.innerHTML to score.php
* fetch
** intercept '''fetch''' calls, after the promise has been resolved pass document.innerHTML to score.php
* clicky
** trigger a click on the button before checking innerHTML
** if there is a <pre class=test> element...
** complete each action and evaluate the expr each time. The result is a list, usr and ans are compared
<pre class=test>
{expr:[{id:'ride',prop:"disabled"}],
actions:[{},{id:'tall',method:"click"}]}
</pre>

==Notes on score.php==
Each question creates two iframes one for user input one for model answer.

The containing document cannot see the iframe contents so we use a round-about scoring mechanism:
* Each iframe reports to score.php with the body innerHTML or the canvas content
* score.php responds to the second of the two calls by generating an MQTT message
topic: pzscore/0.08061187738818432
payload: {"uid":"0.08061187738818432","aid":"1629570082","qid":"Flags_with_Rectangles-1","score":50}
* these messages can be picked up by the parent page, also allows a teacher to monitor a class

<htmltag tagname="video" src="v.mp4" width="100%" controls ></htmltag>

2022-08-17T06:23:04Z

Andr3w: /* Generate public/private key pairs */

<pre id='shellbody' data-qtp='DOM'></pre>
==Fermat's Little Theorem==
<div class='qu' data-width=300>
Fermat's little theorem tells us that
x<sup>p</sup> mod p = x
if <code>p</code> is prime for <code>x<p</code>

Verify this by trying prime and non-prime values for p. You can can generate prime numbers from https://bigprimes.org/
<pre class='usr'>
document.body.append(
mkInput('p','101'),
mkInput('m','3'),
$m('button',{onclick:function(){
document.getElementById('result').value =
pow(getbig('m'),getbig('p'),getbig('p'));
}},`m<sup>p</sup> mod p`),
$m('input',{id:'result'})
);

//raise n to the power e, modulo m
function pow(n,e,m){
if (e<=0) return 1n;
let r = pow(n,e/2n,m);
return (r*r*(e%2n===1n?n:1n))%m;
}

//Create an element with tagname and properties
//children can be a string (innerHTML) or a list of elements
function $m(tag,prop,children){
let ret = document.createElement(tag);
for(let k in prop)
ret[k] = prop[k];
if (typeof(children)==='string')
ret.innerHTML = children;
if (Array.isArray(children))
for(let c of children)
ret.append(c);
return ret;
}
//Get the value in element with id, convert it to a BigInt
function getbig(id){return BigInt(document.getElementById(id).value)}
//Return a div containing label and input. id is shown in the label
function mkInput(id,value){
return $m('div',{},[$m('label',{},id),$m('input',{id,value})]);
}
</pre>
</div>

==Generate public/private key pairs==
<div class=qu data-width=500 data-height=250>
<pre class=usr>
document.body.append(
addHiddenInput('p','101'),
addHiddenInput('q','103'),
addInput('e','7'),
$m('button',{onclick:()=>{
$i('d').value=modInverse(gb('e'),(gb('p')-1n)*(gb('q')-1n));
$i('n').value=gb('p')*gb('q');
}},'Generate public/private key'),
addHiddenInput('d',''),
addInput('n',''),
addInput('message','123'),
$m('button',{onclick:()=>{
$i('encrypted').value=pow(gb('message'),gb('e'),gb('n'));
}},'encrypt with public key'),
addInput('encrypted',''),
$m('button',{onclick:()=>{
$i('decrypted').value=pow(gb('encrypted'),gb('d'),gb('n'));
}},'decrypt with private key'),
addInput('decrypted','')
);

function modInverse(a, m){
a = (a%m+m)%m;
if (!a||m<2n) {
return NaN // invalid input
}
// find the gcd
const s=[]
let b=m
while(b) {
[a,b] = [b,a%b]
s.push({a, b})
}
if (a!==1n) {
return NaN // inverse does not exists
}
// find the inverse
let x = 1n
let y = 0n
for(let i=s.length-2; i>=0;--i) {
[x,y] = [y,x-y*(s[i].a/s[i].b)]
}
return (y%m+m)%m
}
//Utility functions
function pow(n,e,m){
if (e<=0) return 1n;
let r = pow(n,e/2n,m);
return (r*r*(e%2n===1n?n:1n))%m;
}
function $i(id){return document.getElementById(id);}
function $m(tag,prop,children){
let ret = document.createElement(tag);
for(let k in prop)
ret[k] = prop[k];
if (typeof(children)==='string')
ret.innerHTML = children;
if (Array.isArray(children))
for(let c of children)
ret.append(c);
return ret;
}
function gb(id){return BigInt(document.getElementById(id).value)}
function addInput(id,value){
return $m('div',{},[$m('label',{},`${id} `),$m('input',{id,value})]);
}
function addHiddenInput(id,value){
return $m('div',{},[
$m('label',{},`${id} `),
$m('input',{id,value,type:'password'}),
$m('span',{onclick:()=>{$i(id).removeAttribute('type')}},' show')
]);
}
</pre>
</div>

<pre id='shellbody' data-qtp='DOM'></pre>
==Fermat's Little Theorem==
<div class='qu' data-width=300>
Fermat's little theorem tells us that
x<sup>p</sup> mod p = x
if <code>p</code> is prime for <code>x<p</code>

Verify this by trying prime and non-prime values for p. You can can generate prime numbers from https://bigprimes.org/
<pre class='usr'>
document.body.append(
mkInput('p','101'),
mkInput('m','3'),
$m('button',{onclick:function(){
document.getElementById('result').value =
pow(getbig('m'),getbig('p'),getbig('p'));
}},`m<sup>p</sup> mod p`),
$m('input',{id:'result'})
);

//raise n to the power e, modulo m
function pow(n,e,m){
if (e<=0) return 1n;
let r = pow(n,e/2n,m);
return (r*r*(e%2n===1n?n:1n))%m;
}

//Create an element with tagname and properties
//children can be a string (innerHTML) or a list of elements
function $m(tag,prop,children){
let ret = document.createElement(tag);
for(let k in prop)
ret[k] = prop[k];
if (typeof(children)==='string')
ret.innerHTML = children;
if (Array.isArray(children))
for(let c of children)
ret.append(c);
return ret;
}
//Get the value in element with id, convert it to a BigInt
function getbig(id){return BigInt(document.getElementById(id).value)}
//Return a div containing label and input. id is shown in the label
function mkInput(id,value){
return $m('div',{},[$m('label',{},id),$m('input',{id,value})]);
}
</pre>
</div>

==Splitting the exponent==
<div class=qu data-width=500 data-height=250>
<pre class=usr>
document.body.append(
addHiddenInput('p','101'),
addHiddenInput('q','103'),
addInput('e','7'),
$m('button',{onclick:()=>{
$i('d').value=modInverse(gb('e'),(gb('p')-1n)*(gb('q')-1n));
$i('n').value=gb('p')*gb('q');
}},'Generate public/private key'),
addHiddenInput('d',''),
addInput('n',''),
addInput('message','123'),
$m('button',{onclick:()=>{
$i('encrypted').value=pow(gb('message'),gb('e'),gb('n'));
}},'encrypt with public key'),
addInput('encrypted',''),
$m('button',{onclick:()=>{
$i('decrypted').value=pow(gb('encrypted'),gb('d'),gb('n'));
}},'decrypt with private key'),
addInput('decrypted','')
);

function modInverse(a, m){
a = (a%m+m)%m;
if (!a||m<2n) {
return NaN // invalid input
}
// find the gcd
const s=[]
let b=m
while(b) {
[a,b] = [b,a%b]
s.push({a, b})
}
if (a!==1n) {
return NaN // inverse does not exists
}
// find the inverse
let x = 1n
let y = 0n
for(let i=s.length-2; i>=0;--i) {
[x,y] = [y,x-y*(s[i].a/s[i].b)]
}
return (y%m+m)%m
}
//Utility functions
function pow(n,e,m){
if (e<=0) return 1n;
let r = pow(n,e/2n,m);
return (r*r*(e%2n===1n?n:1n))%m;
}
function $i(id){return document.getElementById(id);}
function $m(tag,prop,children){
let ret = document.createElement(tag);
for(let k in prop)
ret[k] = prop[k];
if (typeof(children)==='string')
ret.innerHTML = children;
if (Array.isArray(children))
for(let c of children)
ret.append(c);
return ret;
}
function gb(id){return BigInt(document.getElementById(id).value)}
function addInput(id,value){
return $m('div',{},[$m('label',{},`${id} `),$m('input',{id,value})]);
}
function addHiddenInput(id,value){
return $m('div',{},[
$m('label',{},`${id} `),
$m('input',{id,value,type:'password'}),
$m('span',{onclick:()=>{$i(id).removeAttribute('type')}},' show')
]);
}
</pre>
</div>

File:Poke4.png

2022-08-16T21:02:58Z

Andr3w: