https://smart-board.silkandpepper.com/

スキャンID：
1366d7ac-6ccc-4474-a268-8dabf907d95a終了
送信済みURL：
https://smart-board.silkandpepper.com/
レポート終了日：

リンク · 1件検出

リンクテキスト
https://yiays.comYiays

JavaScript変数 · 32件検出

名前規模
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
$function
jQueryfunction
set_colourfunction
advance_colourfunction
reset_colourfunction
randintfunction
shufflefunction

コンソールログメッセージ · 0件検出

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&amp;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&amp;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&amp;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&amp;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&amp;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>