HTML: memory game check if two pictures matched function

user_9060608 0
Viewed 181

I'm making a flip card game, but the check for matches function won't work. I'm also unsure if I should use

.dataset.framework

or

.dataset.name

for my checkForMatch() function. And since the checkForMatch() function will not work, I can't limit to opened cards to two (as in, I can just keep opening cards as much as I can, without the cards unflipping back to normally despite the fact that I've included unflip function).

I referred to this tutorial and this tutorial, since these are exactly how I want my code to turn out to be but nothing seems to be working.

Codepen is here: https://codepen.io/siapanamasaya/pen/GRqwdQE

    let cards = document.getElementsByClassName("card");
    if (cards !== 0) {
      let card_array = [];
      for (let i = 0; i < cards.length; i++) {
        card_array.push(i);
      }

      for (let i = 0; i < cards.length; i++) {
        let j = Math.floor(Math.random() * card_array.length);
        let card = cards.item(card_array[j]);
        card.parentNode.appendChild(card);
        card_array.splice(j, 1);
      }
    }

    let hasFlippedCard = false;
    let lockBoard = false;
    let firstCard, secondCard;

    function flipCard() {
      if (lockBoard) return;
      if (this === firstCard) return;

      this.classList.add('flip');

      if (!hasFlippedCard) {
        hasFlippedCard = true;
        firstCard = this;

        return;
      }

      secondCard = this;
      checkForMatch();
    }

    function checkForMatch() {
      let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

      isMatch ? disableCards() : unflipCards();
    }

    function disableCards() {
      firstCard.removeEventListener('click', flipCard);
      secondCard.removeEventListener('click', flipCard);
      resetBoard();
    }

    function unflipCards() {
      lockBoard = true;

      setTimeout(() => {
        firstCard.classList.remove('flip');
        secondCard.classList.remove('flip');

        resetBoard();
      }, 1500);
    }

    function resetBoard() {
      [hasFlippedCard, lockBoard] = [false, false];
      [firstCard, secondCard] = [null, null];
    }

    window.addEventListener("load", function() {
      document.querySelector(".card-container").addEventListener("click", function(e) {
        const tgt = e.target;
        const card = tgt.closest("div");
        if (card.classList.contains("card-front") || card.classList.contains("card-back")) {
          card.closest(".card").classList.toggle("flip");
        }
      });
    });
body {
  background-color: gray;
}

.card {
  width: 180px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transition: 1s;
  margin: 5px;
}

.card-front, .card-back {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  position: absolute;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.card-back {
  background-color: orange;
}

img {
  width: 170px;
  height: 190px;
  padding: 5px;
  border-radius: 8px;
}

.card-front {
  background-color: white;
  transform: rotateY(180deg);
}

.flip {
     transform: rotateY(180deg);
 }

.card.flip {
  transform: rotateY(180deg);
}

.card:active {
  transform: scaled(0.97);
  transition: transform .2s;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
}
<div class="card-container">
      <div class="card" data-framework="one">
        <div class="card-front">
          <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_01.jpg" alt = "One">
        </div>
        <div class="card-back">
          <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
        </div>
      </div>
      <div class="card" data-framework="two">
        <div class="card-front">
          <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_02.jpg" alt = "Two">
        </div>
        <div class="card-back">
          <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
        </div>
      </div>
      <div class="card" data-framework="three">
        <div class="card-front">
          <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_03.jpg" alt = "Three">
        </div>
        <div class="card-back">
          <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
        </div>
      </div>
      <div class="card" data-framework="four">
        <div class="card-front">
          <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_04.jpg" alt = "Four">
        </div>
        <div class="card-back">
          <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
        </div>
      </div>
      <div class="card" data-framework="five">
        <div class="card-front">
          <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_05.jpg" alt = "Five">
        </div>
        <div class="card-back">
          <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
        </div>
      </div>
      <div class="card" data-framework="six">
        <div class="card-front">
          <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_06.jpg" alt = "Six">
        </div>
        <div class="card-back">
          <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
        </div>
      </div>
      <div class="card" data-framework="seven">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_07.jpg" alt = "Seven">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="eight">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_08.jpg" alt = "Eight">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="nine">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_09.jpg" alt = "Nine">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="ten">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_10.jpg" alt = "Ten">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="eleven">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_11.jpg" alt = "Eleven">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="twelve">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_12.jpg" alt = "Twelve">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="thirteen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_13.jpg" alt = "Thirteen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="fourteen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_14.jpg" alt = "Fourteen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="fifteen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_15.jpg" alt = "Fifteen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="sixteen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_16.jpg" alt = "Sixteen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="seventeen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_17.jpg" alt = "Seventeen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="eighteen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_18.jpg" alt = "Eighteen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="nineteen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_19.jpg" alt = "Nineteen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="one">
        <div class="card-front">
          <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_01.jpg" alt = "One">
        </div>
        <div class="card-back">
          <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
        </div>
      </div>
      <div class="card" data-framework="two">
        <div class="card-front">
          <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_02.jpg" alt = "Two">
        </div>
        <div class="card-back">
          <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
        </div>
      </div>
      <div class="card" data-framework="three">
        <div class="card-front">
          <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_03.jpg" alt = "Three">
        </div>
        <div class="card-back">
          <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
        </div>
      </div>
      <div class="card" data-framework="four">
        <div class="card-front">
          <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_04.jpg" alt = "Four">
        </div>
        <div class="card-back">
          <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
        </div>
      </div>
      <div class="card" data-framework="five">
        <div class="card-front">
          <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_05.jpg" alt = "Five">
        </div>
        <div class="card-back">
          <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
        </div>
      </div>
      <div class="card" data-framework="six">
        <div class="card-front">
          <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_06.jpg" alt = "Six">
        </div>
        <div class="card-back">
          <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
        </div>
      </div>
      <div class="card" data-framework="seven">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_07.jpg" alt = "Seven">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="eight">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_08.jpg" alt = "Eight">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="nine">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_09.jpg" alt = "Nine">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="ten">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_10.jpg" alt = "Ten">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="eleven">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_11.jpg" alt = "Eleven">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="twelve">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_12.jpg" alt = "Twelve">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="thirteen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_13.jpg" alt = "Thirteen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="fourteen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_14.jpg" alt = "Fourteen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="fifteen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_15.jpg" alt = "Fifteen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="sixteen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_16.jpg" alt = "Sixteen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="seventeen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_17.jpg" alt = "Seventeen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="eighteen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_18.jpg" alt = "Eighteen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
      <div class="card" data-framework="nineteen">
    <div class="card-front">
      <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_19.jpg" alt = "Nineteen">
    </div>
    <div class="card-back">
      <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt = "logo">
    </div>
      </div>
    </div>

css html javascript
1 Answers

Replace the JS code with this one

For I have noted with a comment in the code which are the new lines.

Your omission is that no Event Listener has been added to the elements

In this code has a disableCards() function which "removeEventListener" from "Card" but nowhere has "EventListener" been inserted before

In the flipCard() function, I removed this line this.classList.add('flip');

let cards = document.getElementsByClassName("card");
if (cards !== 0) {
    let card_array = [];
    for (let i = 0; i < cards.length; i++) {
        card_array.push(i);
    }

    for (let i = 0; i < cards.length; i++) {
        let j = Math.floor(Math.random() * card_array.length);
        let card = cards.item(card_array[j]);
        card.parentNode.appendChild(card);
        card_array.splice(j, 1);
    }
}

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;


// NEW LINE
for (let i = 0; i < cards.length; i++) {
    cards[i].addEventListener('click', flipCard);
}
// END NEW LINE


function flipCard() {
    if (lockBoard) return;
    if (this === firstCard) return;

    // this.classList.add('flip');

    if (!hasFlippedCard) {
        hasFlippedCard = true;
        firstCard = this;

        return;
    }

    secondCard = this;
    checkForMatch();
}

function checkForMatch() {
    let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

    isMatch ? disableCards() : unflipCards();
}

function disableCards() {
    firstCard.removeEventListener('click', flipCard);
    secondCard.removeEventListener('click', flipCard);
    resetBoard();
}

function unflipCards() {
    lockBoard = true;

    setTimeout(() => {
        firstCard.classList.remove('flip');
        secondCard.classList.remove('flip');

        resetBoard();
    }, 1500);
}

function resetBoard() {
    [hasFlippedCard, lockBoard] = [false, false];
    [firstCard, secondCard] = [null, null];
}

window.addEventListener("load", function () {
    document.querySelector(".card-container").addEventListener("click", function (e) {
        const tgt = e.target;
        const card = tgt.closest("div");
        if (card.classList.contains("card-front") || card.classList.contains("card-back")) {
            card.closest(".card").classList.toggle("flip");
        }
    });
});
body {
    background-color: gray;
}

.card {
    width: 180px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transition: 1s;
    margin: 5px;
}

.card-front,
.card-back {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    position: absolute;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.card-back {
    background-color: orange;
}

img {
    width: 170px;
    height: 190px;
    padding: 5px;
    border-radius: 8px;
}

.card-front {
    background-color: white;
    transform: rotateY(180deg);
}

.flip {
    transform: rotateY(180deg);
}

.card.flip {
    transform: rotateY(180deg);
}

.card:active {
    transform: scaled(0.97);
    transition: transform .2s;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
}
<div class="card-container">
    <div class="card" data-framework="one">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_01.jpg"
                alt="One">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="two">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_02.jpg"
                alt="Two">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="three">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_03.jpg"
                alt="Three">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="four">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_04.jpg"
                alt="Four">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="five">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_05.jpg"
                alt="Five">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="six">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_06.jpg"
                alt="Six">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="seven">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_07.jpg"
                alt="Seven">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="eight">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_08.jpg"
                alt="Eight">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="nine">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_09.jpg"
                alt="Nine">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="ten">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_10.jpg"
                alt="Ten">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="eleven">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_11.jpg"
                alt="Eleven">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="twelve">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_12.jpg"
                alt="Twelve">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="thirteen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_13.jpg"
                alt="Thirteen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="fourteen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_14.jpg"
                alt="Fourteen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="fifteen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_15.jpg"
                alt="Fifteen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="sixteen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_16.jpg"
                alt="Sixteen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="seventeen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_17.jpg"
                alt="Seventeen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="eighteen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_18.jpg"
                alt="Eighteen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="nineteen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_19.jpg"
                alt="Nineteen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="one">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_01.jpg"
                alt="One">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="two">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_02.jpg"
                alt="Two">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="three">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_03.jpg"
                alt="Three">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="four">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_04.jpg"
                alt="Four">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="five">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_05.jpg"
                alt="Five">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="six">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_06.jpg"
                alt="Six">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="seven">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_07.jpg"
                alt="Seven">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="eight">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_08.jpg"
                alt="Eight">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="nine">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_09.jpg"
                alt="Nine">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="ten">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_10.jpg"
                alt="Ten">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="eleven">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_11.jpg"
                alt="Eleven">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="twelve">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_12.jpg"
                alt="Twelve">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="thirteen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_13.jpg"
                alt="Thirteen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="fourteen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_14.jpg"
                alt="Fourteen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="fifteen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_15.jpg"
                alt="Fifteen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="sixteen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_16.jpg"
                alt="Sixteen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="seventeen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_17.jpg"
                alt="Seventeen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="eighteen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_18.jpg"
                alt="Eighteen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
    <div class="card" data-framework="nineteen">
        <div class="card-front">
            <img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_19.jpg"
                alt="Nineteen">
        </div>
        <div class="card-back">
            <img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg" alt="logo">
        </div>
    </div>
</div>

user_109681340
Related