Skip to content

Commit

Permalink
fix an issue where iphone users would stop at QR code and not upload …
Browse files Browse the repository at this point in the history 
…the file
  • Loading branch information
@TheRealOne78
TheRealOne78 committed Jan 12, 2025
1 parent 8af7100 commit 24df909
Showing 1 changed file with 40 additions and 28 deletions.
68 changes: 40 additions & 28 deletions _layouts/survey.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="darkreader" content="no-invert">
<!--<meta name="darkreader-lock">-->
<script type="text/javascript" src="/resources/npm/node_modules/davidshimjs-qrcodejs/qrcode.min.js"></script>
<link type="text/css" href="/resources/npm/node_modules/survey-core/defaultV2.min.css" rel="stylesheet">
<script type="text/javascript" src="/resources/npm/node_modules/survey-core/survey.core.min.js"></script>
<script type="text/javascript" src="/resources/npm/node_modules/survey-core/survey.i18n.min.js"></script>
<script type="text/javascript" src="/resources/npm/node_modules/survey-core/themes/index.min.js"></script>
<script type="text/javascript" src="/resources/npm/node_modules/survey-js-ui/survey-js-ui.min.js"></script>
<script type="text/javascript" src="/resources/npm/node_modules/jspdf/dist/jspdf.umd.min.js"></script>
Expand All @@ -19,11 +21,16 @@
padding: 0;
}

.qrContainer {
display: none;
justify-content: center;
}

.qr {
margin: 10px 0 0 0;
padding: 25px;
border-radius: 20px;
background-color: #ffffff !important;
background-color: #ffa128 !important;
}

#success-upload, #fail-upload {
Expand Down Expand Up @@ -70,11 +77,11 @@
</style>
</head>
<body>
<div style="display: flex; justify-content: center;">
<div class="qrContainer">
<div id="qrcode" class="qr"></div>
</div>

<div style="display: none; justify-content: center;">
<div class="qrContainer">
<div id="qrcode-id" class="qr"></div>
</div>

Expand All @@ -85,7 +92,9 @@ <h5 id="testID"></h5>
<h3 id="testIDWarn">Arată acest cod profesorului pentru a valida testul!</h3>
</div>

<h3 id="success-upload" style="color:gray">Fișier trimis. Aștept validare test...</h2>
<h3 id="success-upload" style="color:gray">Fișier trimis. Aștept validare test...</h3>

<h2 style="display: none; flex-direction: center"><a id="seePDF" style="color: gray; text-align:center">După ce arăți codul profesorului, apasă aici ca să îți vizualizezi răspunsurile tale.</a></h2>

<div id="nameFormContainer">
<div id="nameForm">
Expand All @@ -100,8 +109,8 @@ <h4 for="nameInput" style="color: #ffffff; text-align:left; padding:0; margin: 0
// QR Code Generation
function generateQRCode(elementId, data, size="512") {
const qrcodeElement = document.getElementById(elementId);
qrcodeElement.innerHTML = ""; // Clear any existing QR code
new QRCode(qrcodeElement, {
qrcodeElement.parentElement.style.display = "flex";
new QRCode(qrcodeElement, {
text: data,
width: size,
height: size,
Expand All @@ -125,15 +134,19 @@ <h4 for="nameInput" style="color: #ffffff; text-align:left; padding:0; margin: 0
return `${randomHex}-${timestamp}`;
}

function downloadPDF(uniqueID, pdf) {
pdf.save(`${uniqueID}.pdf`);
}

// Sleep function that returns a Promise resolving after the specified timeout (in milliseconds)
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

// Save and Upload PDF with Retry on Conflict
async function saveAndUploadPDF(pdf, uniqueID, name) {
async function saveAndUploadPDF(pdf) {
const pdfBlob = await pdf.raw("blob");
let uploadID = uniqueID;
let uploadID = generateUniqueID();

while (true) {
const formData = new FormData();
Expand Down Expand Up @@ -168,12 +181,7 @@ <h4 for="nameInput" style="color: #ffffff; text-align:left; padding:0; margin: 0
}
}

// Optional local download for testing
//const link = document.createElement("a");
//link.href = URL.createObjectURL(pdfBlob);
//link.download = `${uniqueID}.pdf`;
//link.click();
//console.log("Blob downloaded successfully!");
return uploadID;
}

// Initialize Survey
Expand All @@ -186,7 +194,6 @@ <h4 for="nameInput" style="color: #ffffff; text-align:left; padding:0; margin: 0
survey.render(document.getElementById("surveyContainer"));

survey.onComplete.add(function (sender) {
const uniqueID = generateUniqueID();
const surveyResults = sender.data;

// Show name input form
Expand All @@ -202,18 +209,6 @@ <h4 for="nameInput" style="color: #ffffff; text-align:left; padding:0; margin: 0
// Hide name form
document.getElementById("nameForm").style.display = "none";

// Display the unique ID
const testIDDiv = document.getElementById("testID");
testIDDiv.parentElement.style.display = "block";
testIDDiv.innerHTML = `ID: ${uniqueID}`;

// Generate the second QR Code for name and unique ID
generateQRCode("qrcode-id", `${name},${uniqueID}`, 256);

// Update visibility
document.getElementById("qrcode-id").parentElement.style.display = "flex"; // Show the second QR code
document.getElementById("qrcode").parentElement.style.display = "none"; // Hide the first QR code

// Create and upload PDF
const pdfOptions = {
fontSize: 12,
Expand All @@ -234,7 +229,24 @@ <h4 for="nameInput" style="color: #ffffff; text-align:left; padding:0; margin: 0
surveyPdf.data = surveyResults;
surveyPdf.locale = "ro";

saveAndUploadPDF(surveyPdf, uniqueID, name);
document.getElementById("seePDF").parentElement.style.display = "flex";
document.getElementById("seePDF").addEventListener("click", function () {
downloadPDF("tmp", surveyPdf);
})

let uniqueID = saveAndUploadPDF(surveyPdf);

// Display the unique ID
const testIDDiv = document.getElementById("testID");
testIDDiv.parentElement.style.display = "block";
testIDDiv.innerHTML = `ID: ${uniqueID}`;

// Generate the second QR Code for name and unique ID
generateQRCode("qrcode-id", `${name},${uniqueID}`, 256);

// Update visibility
document.getElementById("qrcode-id").parentElement.style.display = "flex"; // Show the second QR code
document.getElementById("qrcode").parentElement.style.display = "none"; // Hide the first QR code
};
});
}
Expand Down

0 comments on commit 24df909

Please sign in to comment.