- ID de l'analyse :
- 1366d7ac-6ccc-4474-a268-8dabf907d95aTerminée
- URL soumise :
- https://smart-board.silkandpepper.com/
- Fin du rapport :
Liens : 1 trouvé(s)
Liens sortants identifiés à partir de la page
Lien | texte |
---|---|
https://yiays.com | Yiays |
Variables JavaScript : 32 trouvée(s)
Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel
Nom | Type |
---|---|
onbeforetoggle | object |
documentPictureInPicture | object |
onscrollend | object |
$ | function |
jQuery | function |
set_colour | function |
advance_colour | function |
reset_colour | function |
randint | function |
shuffle | function |
Messages de journal de console : 0 trouvé(s)
Messages consignés dans la console web
HTML
Le corps HTML de la page en données brutes
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smartboard Games</title>
<meta name="description" content="A collection of simple educational games designed to run on smartboards, tablets, and phones.">
<meta name="tags" content="educational, games, smartboard, whiteboard, classroom, student, interactive">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/common.css?v=15">
<link rel="stylesheet" href="https://cdn.yiays.com/yiaycons/yiaycons.css">
<style>
a {
color: white!important;
}
.hero, nav, footer {
width: 100%;
box-sizing: border-box;
background: #242424;
}
.hero {
padding: 1em;
z-index: 100;
}
@media screen and (max-width: 40rem) {
.hero {
padding-top: 3rem;
}
}
nav, footer {
box-shadow: rgba(0,0,0,0.25) 0 0 0.25rem 0;
}
nav {
position: sticky;
top: 0;
z-index: 99;
}
.profile {
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
text-decoration: none;
gap: 0.2em;
top: 0;
right: 0;
font-size: 3rem;
padding: 1rem;
background: radial-gradient(at top right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%);
}
.profile::before {
content: attr(data-username);
font-size: 0.33em;
}
.profile::after {
content: attr(data-note);
font-size: 0.2em;
position: absolute;
font-style: italic;
font-weight: 400;
top: 0.6em;
right: 1em;
width: max-content;
}
.profile .pfp {
background: #555;
display: block;
width: 1em;
height: 1em;
border-radius: 50%;
overflow: hidden;
}
.profile .icon {
position: relative;
top: 0.1em;
}
main {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
}
footer {
display: flex;
padding: 0.75em;
align-items: center;
justify-content: center;
}
footer > * {
margin: 0 2rem;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.games {
margin: 1rem;
max-width: 120rem;
}
.categories {
display: block;
text-align: center;
padding: 0.5rem;
}
.category {
display: inline-block;
font-size: 0.9rem;
margin: 0.25rem;
min-width: 5em;
}
.category.active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.c-trivia {
background-color: #863d0c;
background-color: var(--trivia);
}
.c-stem {
background-color: #1a547a;
background-color: var(--stem);
}
.c-geography {
background-color: #1d663c;
background-color: var(--geo);
}
.c-english {
background-color: #561f6d;
background-color: var(--eng);
}
.c-other {
background-color: #aaa;
background-color: var(--secondary);
color: black !important;
color: var(--antitext) !important;
}
.game {
position: relative;
flex-direction: column;
width: 19em;
min-height: 5.8em;
max-height: 12em;
margin: 1em;
padding: 3em 0.5em;
font-size: 1em;
transition: font-size 250ms;
}
.game::after {
content: attr(data-note);
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
margin: 0.5rem;
font-size: 0.8em;
font-weight: 400;
}
.game.hidden {
font-size: 0em;
}
.game .badges {
position: absolute;
top: 0;
right: 0;
text-align: right;
margin: 0.5em;
}
.game h1, .game p {
flex-grow: 1;
}
.game sub {
font-style: italic;
}
</style>
</head>
<body>
<div class="hero">
<a href="/profile.html" class="profile" data-username="not logged in" data-note="Your secret can now be saved to browser, improved badge names - 31/10/2024">
<i class="pfp">
<span class="icon icon-">user</span>
</i>
</a>
<h1>Smartboard Games</h1>
<p>
A collection of simple educational games (and some tools), designed to be compatible with smartboards, tablets, and phones.
</p>
</div>
<nav class="categories">
<a href="#" class="btn category" data-filter="none">All</a>
<a href="#trivia" class="btn category c-trivia" data-filter="trivia">Trivia</a>
<a href="#stem" class="btn category c-stem" data-filter="stem">STEM</a>
<a href="#geography" class="btn category c-geography" data-filter="geography">Geography</a>
<a href="#english" class="btn category c-english" data-filter="english">English</a>
<a href="#tool" class="btn category c-other" data-filter="tool"><span class="icon icon-cog"></span> Tool</a>
<a href="#leaderboard" class="btn category c-other" data-filter="leaderboard"><span class="icon icon-stats-bars2"></span> Leaderboard</a>
<a href="#team" class="btn category c-other" data-filter="team"><span class="icon icon-users"></span> Team</a>
</nav>
<main>
<div class="row games">
<a href="trivia/5secondrule.html" class="btn game c-trivia" data-filter="trivia team" data-note="">
<p class="badges">
<span class="icon icon-users" title="Team game"></span>
</p>
<h1>5 Second Rule</h1>
<p>Quickfire questions with a 5 second time limit</p>
</a>
<a href="geography/capitals.html" class="btn game c-geography" data-filter="geography team" data-note="">
<p class="badges">
<span class="icon icon-users" title="Team game"></span>
</p>
<h1>Capital Cities</h1>
<p>Guess the capital for each country</p>
</a>
<a href="geography/capitals.html?mode=1" class="btn game c-geography" data-filter="geography team" data-note="">
<p class="badges">
<span class="icon icon-users" title="Team game"></span>
</p>
<h1>Countries</h1>
<p>Guess the country for each capital</p>
</a>
<a href="geography/capitals.html?mode=2" class="btn game c-geography" data-filter="geography team" data-note="">
<p class="badges">
<span class="icon icon-users" title="Team game"></span>
</p>
<h1>Flags</h1>
<p>Guess the country for each flag</p>
</a>
<a href="stem/quickmaths.html?mode=0&difficulty=easy" class="btn game c-stem" data-filter="stem leaderboard" data-scope="quickmaths_0_*" data-note="">
<p class="badges">
<span class="icon icon-stats-bars2" title="Leaderboard game"></span>
</p>
<h1>Quick Addition</h1>
<p>Quickfire maths questions with multiple choice answers</p>
</a>
<a href="stem/quickmaths.html?mode=1&difficulty=easy" class="btn game c-stem" data-filter="stem leaderboard" data-scope="quickmaths_1_*" data-note="">
<p class="badges">
<span class="icon icon-stats-bars2" title="Leaderboard game"></span>
</p>
<h1>Quick Subtraction</h1>
<p>Quickfire maths questions with multiple choice answers</p>
</a>
<a href="stem/quickmaths.html?mode=2&difficulty=easy" class="btn game c-stem" data-filter="stem leaderboard" data-scope="quickmaths_2_*" data-note="">
<p class="badges">
<span class="icon icon-stats-bars2" title="Leaderboard game"></span>
</p>
<h1>Quick Multiplication</h1>
<p>Quickfire maths questions with multiple choice answers</p>
</a>
<a href="stem/quickmaths.html?mode=3&difficulty=easy" class="btn game c-stem" data-filter="stem leaderboard" data-scope="quickmaths_3_*" data-note="">
<p class="badges">
<span class="icon icon-stats-bars2" title="Leaderboard game"></span>
</p>
<h1>Quick Division</h1>
<p>Quickfire maths questions with multiple choice answers</p>
</a>
<a href="english/anagrams.html" class="btn game c-english" data-filter="english leaderboard" data-scope="anagrams_*" data-note="Physical keyboard support fixed - 3/07/2024">
<p class="badges">
<span class="icon icon-stats-bars2" title="Leaderboard game"></span>
</p>
<h1>Anagrams</h1>
<p>Spell as many words as you can with the letters of another word</p>
</a>
<a href="english/storyshuffle.html" class="btn game c-english" data-filter="english tool" data-note="All around polish - 31/10/2024">
<p class="badges">
<span class="icon icon-cog" title="Utility"></span>
</p>
<h1>Story Shuffle</h1>
<p>Interpret a set of 3 random images to inspire your next story</p>
</a>
<a href="stem/magicsquares.html" class="btn game c-stem" data-filter="stem" data-note="">
<p class="badges"></p>
<h1>Magic Squares</h1>
<p>Solve randomly generated magic square maths puzzles</p>
</a>
<a href="english/spelling.html" class="btn game c-english" data-filter="english" data-scope="spelling_*" data-note="Added more words, improved voice readings, physical keyboard support fixed - 3/07/2024">
<p class="badges">
<span class="icon icon-stats-bars2" title="Leaderboard game"></span>
</p>
<h1>Spelling 🐝</h1>
<p>Hear a word, see the definition, and try your best to spell it!</p>
</a>
<a href="trivia/flashcards.html" class="btn game c-trivia" data-filter="trivia tool" data-note="">
<p class="badges">
<span class="icon icon-cog" title="Utility"></span>
</p>
<h1>Flashcards</h1>
<p>Train your memory with a variety of pre-made flashcards for learning languages</p>
</a>
</div>
</main>
<footer>
<span>
Created by <a href="https://yiays.com">Yiays</a>
</span>
</footer>
<script src="//cdn.yiays.com/jquery-3.6.0.min.js"></script>
<script src="/common.js?v=15.4"></script>
<script>
let badgeCache;
if(localStorage.getItem('badges')) {
badgeCache = JSON.parse(localStorage.getItem('badges'));
}
$().ready(() => {
$('.category').on('click', (e) => {
filter(e.target.dataset.filter);
});
function filter(id) {
$('.game').addClass('hidden');
if(id == 'none'){
$('.game').removeClass('hidden');
}else{
$(`.game[data-filter*=${id}]`).removeClass('hidden');
}
$('.category.active').removeClass('active');
$(`.category.${id}`).addClass('active');
}
filter(location.hash?location.hash.substr(1):'none');
// Show 🥇, 🥈, or 🥉 if a saved username is on the default leaderboard
if(username) {
if(badgeCache) {
if(badgeCache.username == username) {
$.get('https://highscore.yiays.com/?modified')
.done((data) => update_badges(badgeCache.modified, data))
} else {
update_badges();
}
} else {
update_badges()
}
}
});
function update_badges(cacheDate=0, badgeDate=Infinity) {
if(cacheDate < badgeDate) {
badgeCache = {username: username, modified: (new Date()).valueOf()}
$('.game[data-scope]').each((_,el) => {
$.getJSON(`https://highscore.yiays.com/?scope=${el.dataset.scope}&username=${username}`)
.done((data) => {
addLeaderboardBadges(el, data);
badgeCache[el.dataset.scope] = data;
})
.then(() => localStorage.setItem('badges', JSON.stringify(badgeCache)));
});
}else{
$('.game[data-scope]').each((_,el) => {
if(el.dataset.scope in badgeCache)
addLeaderboardBadges(el, badgeCache[el.dataset.scope]);
else {
clearLeaderboardBadges();
badgeCache = null;
update_badges();
return false;
}
});
}
}
const placeName = {1:'1st', 2:'2nd', 3:'3rd'};
const placeEmoji = {1:'🥇', 2:'🥈', 3:'🥉'};
function addLeaderboardBadges(el, data) {
let badgeContainer = $(el).find('.badges');
var sorted = diffsorter(Object.entries(data));
sorted.forEach((place) => {
if(place[1] <= 3)
badgeContainer.append(`<span class="placement" title="You placed ${placeName[place[1]]} in ${place[0]} mode">${placeEmoji[place[1]]}</span>`);
else
badgeContainer.append(`<span class="placement" title="You placed ${place[1]}th in ${place[0]} mode">✅</span>`);
});
}
function clearLeaderboardBadges() {
$('.badges > .placement').remove();
}
function diffsorter(arr) {
const order = ['baby','easy','medium','hard','harder'];
return arr.sort((a, b) => {
const indexA = order.indexOf(a[0].toLowerCase());
const indexB = order.indexOf(b[0].toLowerCase());
if (indexA === -1 && indexB === -1) {
return a[0].localeCompare(b[0]);
} else if (indexA === -1) {
return 1;
} else if (indexB === -1) {
return -1;
} else {
return indexA - indexB;
}
});
}
</script>
</body></html>