first commit
This commit is contained in:
Klemek
+21
@@ -0,0 +1,21 @@
|
||||
import requests
|
||||
import re
|
||||
import json
|
||||
|
||||
BASE_URL = "http://dicosemiopsy.asso-aesp.fr"
|
||||
|
||||
r = requests.get(BASE_URL + "/index.php/lexique.html")
|
||||
|
||||
data = []
|
||||
|
||||
for path in re.findall(r"<li><a href=\"(.*)\">.*</a></li>", r.content.decode("utf-8")):
|
||||
r = requests.get(BASE_URL + path)
|
||||
results = re.findall(
|
||||
r"<h1>(.+)</h1>\s+(.+)</div>\s+</div><!-- /content -->",
|
||||
r.content.decode("utf-8").replace("'", "'"),
|
||||
re.MULTILINE,
|
||||
)
|
||||
data += [{"name": results[0][0], "description": results[0][1]}]
|
||||
|
||||
with open("data.json", mode="w") as f:
|
||||
f.write(json.dumps(data))
|
||||
+10
-5
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title><!-- TODO -->Change this you moron</title>
|
||||
<title>DICOMIOPSY QCM</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script type="text/javascript" src="main.js"></script>
|
||||
@@ -21,11 +21,16 @@
|
||||
</head>
|
||||
<body>
|
||||
<main id="app" style="display:none">
|
||||
<h1>{{title}}</h1>
|
||||
<h1>DICOMIOPSY QCM</h1>
|
||||
<div>
|
||||
<div id='status'>Score : {{ score }}</div>
|
||||
<h2 id="question">{{ data[question].name }}</div>
|
||||
<template v-for="(answer, i) in answers">
|
||||
<div class="answer" :class="{right: show_results && answer.id === this.question, wrong: show_results && answer.clicked && answer.id !== this.question}" @click="click(i)">{{ data[answer.id].description }}</div>
|
||||
</template>
|
||||
</div>
|
||||
<br>
|
||||
<p v-html="content"></p>
|
||||
<br>
|
||||
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - {{currentYear}}</small>
|
||||
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="https://github.com/Klemek/dicosemiopsy-qcm" target="_blank">Github Repository</a> - 2023</small>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,90 +1,35 @@
|
||||
/* exported app, utils */
|
||||
function shuffle(array) {
|
||||
let currentIndex = array.length, randomIndex;
|
||||
|
||||
const utils = {
|
||||
ajax: {
|
||||
proxy: 'cors-anywhere.herokuapp.com',
|
||||
/**
|
||||
* Define a get HTTP request to be executed with .then/.catch
|
||||
* @param {string} url
|
||||
* @param {Object} data
|
||||
* @param {boolean} proxy - use cors proxy
|
||||
* @returns {Promise<Object|string>} return JSON parsed data or string
|
||||
*/
|
||||
get: (url, data, proxy = false) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (data && Object.keys(data).length) {
|
||||
url += '?' + Object.keys(data)
|
||||
.map(k => k + '=' + encodeURIComponent(data[k]))
|
||||
.join('&')
|
||||
.replace(/%20/g, '+');
|
||||
// While there remain elements to shuffle.
|
||||
while (currentIndex != 0) {
|
||||
|
||||
// Pick a remaining element.
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex--;
|
||||
|
||||
// And swap it with the current element.
|
||||
[array[currentIndex], array[randomIndex]] = [
|
||||
array[randomIndex], array[currentIndex]];
|
||||
}
|
||||
const xhr = new XMLHttpRequest();
|
||||
if (proxy) {
|
||||
const http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
|
||||
url = `${http}//${utils.ajax.proxy}/${url}`;
|
||||
}
|
||||
xhr.open('GET', url);
|
||||
xhr.onload = () => {
|
||||
try {
|
||||
resolve(JSON.parse(xhr.responseText));
|
||||
} catch (ignored) {
|
||||
resolve(xhr.responseText);
|
||||
}
|
||||
};
|
||||
xhr.onerror = () => reject(xhr);
|
||||
xhr.send();
|
||||
});
|
||||
},
|
||||
},
|
||||
cookies: {
|
||||
/**
|
||||
* Save a value in a cookie
|
||||
* @param {string} name
|
||||
* @param {string} value
|
||||
* @param {number | undefined} days
|
||||
*/
|
||||
set: function (name, value, days = undefined) {
|
||||
const maxAge = !days ? undefined : days * 864e2;
|
||||
document.cookie = `${name}=${encodeURIComponent(value)}${maxAge ? `;max-age=${maxAge};` : ''}`;
|
||||
},
|
||||
/**
|
||||
* Get a value from a cookie
|
||||
* @param {string} name
|
||||
* @return {string} value from cookie or empty if not found
|
||||
*/
|
||||
get: function (name) {
|
||||
return document.cookie.split('; ').reduce(function (r, v) {
|
||||
const parts = v.split('=');
|
||||
return parts[0] === name ? decodeURIComponent(parts[1]) : r;
|
||||
}, '');
|
||||
},
|
||||
/**
|
||||
* Delete a cookie
|
||||
* @param {string} name
|
||||
*/
|
||||
delete: function (name) {
|
||||
this.set(name, '', -1);
|
||||
},
|
||||
/**
|
||||
* Clear all cookies
|
||||
*/
|
||||
clear: function () {
|
||||
const cookies = document.cookie.split(';');
|
||||
for (let i = 0; i < cookies.length; i++) {
|
||||
const cookie = cookies[i];
|
||||
const eqPos = cookie.indexOf('=');
|
||||
const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
|
||||
document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
|
||||
let app = {
|
||||
data() {
|
||||
return {
|
||||
title: 'Vue-Boilerplate',
|
||||
content: 'Fill this page with <i>whatever</i> you\'re going to develop.<br><b>Then enjoy!</b>',
|
||||
data: [{ name: 'loading', description: 'loading' }],
|
||||
score: 0,
|
||||
question: 0,
|
||||
answers: [
|
||||
{ id: 0, clicked: false },
|
||||
{ id: 0, clicked: false },
|
||||
{ id: 0, clicked: false },
|
||||
{ id: 0, clicked: false },
|
||||
],
|
||||
show_results: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -93,13 +38,51 @@ let app = {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showApp() {
|
||||
showApp(data) {
|
||||
this.data = data;
|
||||
document.getElementById('app').setAttribute('style', '');
|
||||
this.newQuestion();
|
||||
},
|
||||
click(i) {
|
||||
if (!this.show_results) {
|
||||
this.answers[i].clicked = true;
|
||||
if (this.answers[i].id == this.question) {
|
||||
this.score += 1;
|
||||
} else {
|
||||
this.score = 0;
|
||||
}
|
||||
} else {
|
||||
this.newQuestion();
|
||||
}
|
||||
|
||||
this.show_results = !this.show_results;
|
||||
},
|
||||
getRandomDataIndex() {
|
||||
return Math.floor(Math.random() * this.data.length)
|
||||
},
|
||||
newQuestion() {
|
||||
this.question = this.getRandomDataIndex();
|
||||
const ids = [this.question];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
let candidate = this.getRandomDataIndex();
|
||||
while (ids.includes(candidate)) {
|
||||
candidate = this.getRandomDataIndex();
|
||||
}
|
||||
ids.push(candidate);
|
||||
}
|
||||
this.answers = shuffle(ids.map(id => {
|
||||
return {
|
||||
id: id, clicked: false
|
||||
};
|
||||
}));
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
console.log('app mounted');
|
||||
setTimeout(this.showApp);
|
||||
|
||||
fetch("data.json")
|
||||
.then(response => response.json())
|
||||
.then(this.showApp);
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -157,3 +157,74 @@ ol {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
main {
|
||||
max-width: 42rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.main > span {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
#question {
|
||||
font-weight: bold;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.answer {
|
||||
border: 2px solid var(--text-primary);
|
||||
border-radius: .5em;
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.answer:hover {
|
||||
background-color: rgba(0%, 0%, 0%, 10%);
|
||||
}
|
||||
|
||||
.answer:active {
|
||||
background-color: rgba(0%, 0%, 0%, 20%);
|
||||
}
|
||||
|
||||
.answer.disabled {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.answer.right {
|
||||
background-color: #8BC34A;
|
||||
color: #eeeeee;
|
||||
border: 2px solid #558B2F;
|
||||
}
|
||||
|
||||
.answer.right:hover {
|
||||
background-color: #7cb342;
|
||||
}
|
||||
|
||||
.answer.right:active {
|
||||
background-color: #558B2F;
|
||||
}
|
||||
|
||||
.answer.wrong {
|
||||
background-color: #F44336;
|
||||
color: #eeeeee;
|
||||
border: 2px solid #C62828;
|
||||
}
|
||||
|
||||
.answer.wrong:hover {
|
||||
background-color: #E53935;
|
||||
}
|
||||
|
||||
.answer.wrong:active {
|
||||
background-color: #c62828;
|
||||
}
|
||||
Reference in New Issue
Block a user