siriusで絞り込み機能を実装したい

Question

前提・実現したいこと

サイト作成ソフトsiriusを使って、絞り込み機能を実装したいです。
そこで、”shuffle js”というものを使って試してみたのですが、どうにも動きませんm()m
初心者です。申し訳ないですが、どなたか簡単な言葉でご教授頂けないでしょうか。
宜しくお願いいたします。

発生している問題・エラーメッセージ

デベレッパーツールで確認しましたがエラーがひとつあります。↓↓
Uncaught ReferenceError: $ is not defined

該当のソースコード

js↓↓

<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.7.0/d3.min.js"></script> <script type="text/javascript" src="http://churatori.com/js/shuffle.min.js"></script> <link href="http://churatori.com/css/shuffle-styles.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function(){ $('#btn li').on('click', function() { var $this = $(this), $grid = $('#animationList'); $('#btn .active').removeClass('active'); $this.addClass('active'); $grid.shuffle($this.data('group')); }); $('#animationList').shuffle({ group: 'all', speed: 700, easing: 'ease-in-out' }); }); </script>

html↓↓

<ul id="btn"> <li data-group="all" class="active alpha">ALL</li> <li data-group="red" class="alpha">RED</li> <li data-group="blue" class="alpha">BLUE</li> <li data-group="green" class="alpha">GREEN</li> <li data-group="yellow" class="alpha">YELLOW</li> </ul> <ul id="animationList"> <li data-groups='["red"]'><span class="red">RED</span></li> <li data-groups='["yellow"]'><span class="yellow">YELLOW</span></li> <li data-groups='["blue"]'><span class="blue">BLUE</span></li> <li data-groups='["green"]'><span class="green">GREEN</span></li> <li data-groups='["green"]'><span class="green">GREEN</span></li> <li data-groups='["yellow"]'><span class="yellow">YELLOW</span></li> <li data-groups='["blue"]'><span class="blue">BLUE</span></li> <li data-groups='["red"]'><span class="red">RED</span></li> <li data-groups='["red"]'><span class="red">RED</span></li> <li data-groups='["blue"]'><span class="blue">BLUE</span></li> <li data-groups='["yellow"]'><span class="yellow">YELLOW</span></li> <li data-groups='["green"]'><span class="green">GREEN</span></li> </ul>

試したこと

Jqueryとjs本体の読み込み位置を入れ替えたり、＄の代わりにJQueryを入れたりしましたが。動きませんでした。

補足情報（FW/ツールのバージョンなど）

サイト作成ソフトsirius（ver.1.5）

Answer 1

Uncaught ReferenceError: $ is not defined
っていうエラーメッセージからすると、<script>タグでjqueryを読み込む必要がありそうです。

Comments

[manatttttttt]

お返事ありがとうございます。
すみませんｍ()ｍ　Jqueryを読み込んだつもりだったのですが、下記の入力方法では間違えていますか？
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.7.0/d3.min.js"></script>
ど素人ですみません。よろしくお願いいたします。

[set0gut1]

d3jsとjqueryって別なんですよ。
jqueryを読むには次のように書くと良いかと思います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

[manatttttttt]

そうなんですね！丁寧にどうもありがとうございます。

試してみたのですが、今度はエラーがたくさん出てしまいました。(TT)
質問範囲外で大変申し訳ないのですが、可能であれば改善策を頂けないでしょうかm()m

jQuery.Deferred exception: $(...).shuffle is not a function TypeError: $(...).shuffle is not a function
at HTMLDocument.<anonymous> (file:///C:/ACES%20WEB/SIRIUS/data/%E6%B2%96%E7%B8%84%E8%A6%B3%E5%85%89%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E6%83%85%E5%A0%B1%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A1%E3%82%85%E3%82%89%E5%B3%B6%EF%BC%B4%EF%BD%92%EF%BD%89%EF%BD%90/preview.html:327:29)
at l (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29375)
at c (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29677) undefined

Uncaught TypeError: $(...).shuffle is not a function
at HTMLDocument.<anonymous> (preview.html:327)
at l (jquery.min.js:2)
at c (jquery.min.js:2)

Uncaught TypeError: $grid.shuffle is not a function
at HTMLLIElement.<anonymous> (preview.html:325)
at HTMLLIElement.dispatch (jquery.min.js:2)
at HTMLLIElement.y.handle (jquery.min.js:2)

[set0gut1]

jqueryの後にshuffle.jsを読み込むと$(...).shuffleが出現するはずです。
<script>タグを見直して、それでもうまく行かなければ現状のコードを貼ってください。

[manatttttttt]

お返事ありがとうございますm()m
すみません。試したのですがよくわからずうまくいきませんでした。
なにか他の手を模索してみます。
色々教えていただきどうもありがとうございました。