- 제출된 URL:
- https://smart-board.silkandpepper.com/
- 보고서 완료:
링크 · 1개 결과
페이지에서 식별된 외부 링크
| 링크 | 텍스트 |
|---|---|
| https://yiays.com | Yiays |
JavaScript 변수 · 32개 결과
페이지의 창 개체에 로드된 전역 JavaScript 변수는 함수 외부에서 선언된 변수로, 현재 범위 내에서 코드의 어느 부분에서나 액세스할 수 있습니다
| 이름 | 유형 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| $ | function |
| jQuery | function |
| set_colour | function |
| advance_colour | function |
| reset_colour | function |
| randint | function |
| shuffle | function |
콘솔 로그 메시지 · 0개 결과
웹 콘솔에 기록된 메시지
HTML
페이지의 원시 HTML 본문
<!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>