If you are scanning with "QR Attendance Control" then I assume it will work as you expect.
QR codes are pretty much the same afaik, the scanning app controls what happens when scanned.
You can probably just use the param as the set url since it is not going to be used
//https://YOURURL?to=John+Travolta
//-- get the serach param
var paramsString = window.location.search
//-- get the qr element
//-- make params in to object
let searchParams = new URLSearchParams(paramsString);
//--look for param
var theTo_ = searchParams.get("to")
//-- set element text based on param
hypeDocument.getElementById('theto').innerHTML = theTo_
var qrel = hypeDocument.getElementById('qrcode')
//-- generate new qr code using madaffandi url + querystring
var qrcode = new QRCode(qrel, {
text: theTo_,
width: hypeDocument.getElementProperty(qrel, 'width'),
height: hypeDocument.getElementProperty(qrel, 'height'),
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
You can always just right-click on a Hype file and inspect package contents. The JS file is in the resources' folder. Another option is to export the file and the just snap the desired JS file from the exported resource folder. There is also a trick to use and preview and the right click on the filename on top, but certainly Hype could add a reveal in finder option.
How if I want to place two qr code and two name which the same in one file?
I try to copy "theto" and "qrcode" object it's not working.
Then I copy
"theto" and rename to "thetoopen"
and "qrcode" rename to "qrcodeopen"
and change the html code to this:
//https://greenhouse.picasso.id/?to=John+Travolta
//-- get the serach param
var paramsString = window.location.search
//-- get the qr element
//-- make params in to object
let searchParams = new URLSearchParams(paramsString);
//--look for param
var theTo_ = searchParams.get("to")
//-- set element text based on param
hypeDocument.getElementById('theto').innerHTML = theTo_
hypeDocument.getElementById('thetoopen').innerHTML = theTo_
//-- get the qr element
var qrel = hypeDocument.getElementById('qrcode')
var qrelopen = hypeDocument.getElementById('qrcodeopen')
//-- generate new qr code using madaffandi url + querystring
var qrcode = new QRCode(qrel, {
text: theTo_,
width: hypeDocument.getElementProperty(qrel, 'width'),
height: hypeDocument.getElementProperty(qrel, 'height'),
colorDark : "#738766",
colorLight : "#f0f0f0",
correctLevel : QRCode.CorrectLevel.H
});
var qrcode = new QRCode(qrelopen, {
text: theTo_,
width: hypeDocument.getElementProperty(qrel, 'width'),
height: hypeDocument.getElementProperty(qrel, 'height'),
colorDark : "#738766",
colorLight : "#f0f0f0",
correctLevel : QRCode.CorrectLevel.H
});
The simplest way is to use classes for the elements.
Also put the element sets in a group and give the groups a class name and some Additional HTML Attributes.
The code will then look for the group class qrbox and iterate each one it finds.
It will look for the Additional HTML Attributes of each and use these to know which URLSearchParams to use for each.
//https://YOURURL?to1=John+Travolta&to2=Jason+Statham
var theElements = document.querySelectorAll('.qrbox')
var paramsString = window.location.search
let searchParams = new URLSearchParams(paramsString);
theElements.forEach(qrFunction);
function qrFunction(item, index) {
var guestNameParam = item.dataset.name
var qrBoxID = item.dataset.qr
var colorDark = item.dataset.colordark
var colorLight = item.dataset.colorlight
var theTo_ = searchParams.get(guestNameParam )
thisGuestEl = item.querySelector('.theto')
var qrel = item.querySelector('.qrcode')
console.log(colorDark)
thisGuestEl.innerHTML = theTo_
//-- generate new qr code using madaffandi url + querystring
var qrcode = new QRCode(qrel, {
text: theTo_,
width: hypeDocument.getElementProperty(qrel, 'width'),
height: hypeDocument.getElementProperty(qrel, 'height'),
colorDark : colorDark,
colorLight : colorLight,
correctLevel : QRCode.CorrectLevel.H
});
}