以下のような問題と解答をランダムにカルーセルで表示するアプリケーションを作成しました。（github copilotを使用しています。）
使用したフレームワークはdjangoで、カルーセルはすでにあるもの(slick)を使用しました。
作成方法の概要としては、問題と解答を格納したデータベースを作成し、そこからランダムにデータを取ってきて、カルーセルで表示するページそれぞれのテンプレートに格納しました。
index.html
<div class="carousel">
{% for question in questions %}
<div class="inner">
<div class="question-text">{{ question.text }}</div>
<div class="see-answer-rectangle">
<div class="see-answer">答えを見る</div>
</div>
<div id="answer">{{ question.answer }}</div>
</div>
{% endfor %}
</div>
htmlは問題と解答の部分をデータの格納場所とし、ランダムに取ってきた質問の数だけカルーセルで表示するようにしました。
cssは今回のメインテーマではないので省略します。
index.js
document.addEventListener('DOMContentLoaded', function() {
// すべての see-answer-rectangle 要素を取得
const answerButtons = document.querySelectorAll('.see-answer-rectangle');
// 各ボタンにイベントリスナーを設定
answerButtons.forEach(function(button) {
button.addEventListener('click', function() {
// クリックされたボタンの親要素内の .answer 要素を表示
const answer = this.nextElementSibling;
this.style.display = 'none';
answer.style.display = 'block';
});
});
// Slick Carousel の初期化
$('.carousel').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
});
jsは「答えを見る」ボタンをクリックすると解答を表示（表示する要素を変更）するようにし、カルーセルの設定をしました。ここからがdjangoバックエンドの内容になります。
models.py
from django.db import models
# Create your models here.
class Question(models.Model):
text = models.CharField(max_length=255)
answer = models.CharField(max_length=255)
def __str__(self):
return self.text
モデルを定義してマイグレーション。（管理者サイトを作成していない場合は作成）
adimin.py
from django.contrib import admin
from .models import Question
# Register your models here.
admin.site.register(Question)
管理者サイトに登録。
views.py
from django.shortcuts import render
from .models import Question
import random
def index(request):
questions = list(Question.objects.all())
random_questions = random.sample(questions, min(len(questions), 3)) # ランダムに3つの質問を取得
return render(request, "index.html", {"questions": random_questions})
ビューを書く。（今回は取ってくるデータを３つにしました。）
完成！！！
シンプルなアプリケーションですが、Reactのコンポーネントなどを使わずにdjangoとjsのみで作成するのは少し複雑でしたが、無事作成することができました。