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">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title><!-- TODO -->Change this you moron</title>
|
<title>DICOMIOPSY QCM</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||||
<script type="text/javascript" src="main.js"></script>
|
<script type="text/javascript" src="main.js"></script>
|
||||||
@@ -21,11 +21,16 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main id="app" style="display:none">
|
<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>
|
<br>
|
||||||
<p v-html="content"></p>
|
<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>
|
||||||
<br>
|
|
||||||
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - {{currentYear}}</small>
|
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,90 +1,35 @@
|
|||||||
/* exported app, utils */
|
function shuffle(array) {
|
||||||
|
let currentIndex = array.length, randomIndex;
|
||||||
|
|
||||||
|
// 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]];
|
||||||
|
}
|
||||||
|
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
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, '+');
|
|
||||||
}
|
|
||||||
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`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
let app = {
|
let app = {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: 'Vue-Boilerplate',
|
data: [{ name: 'loading', description: 'loading' }],
|
||||||
content: 'Fill this page with <i>whatever</i> you\'re going to develop.<br><b>Then enjoy!</b>',
|
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: {
|
computed: {
|
||||||
@@ -93,13 +38,51 @@ let app = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
showApp() {
|
showApp(data) {
|
||||||
|
this.data = data;
|
||||||
document.getElementById('app').setAttribute('style', '');
|
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 () {
|
mounted: function () {
|
||||||
console.log('app mounted');
|
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;
|
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