メンバー | Squad voice

widgetマスター

モデレータ

2023年9月6日 12:15

【登録カテゴリ】

自動表示

【Widget名】

繰り返し動くスロット※要javascript

【設置例】

https://sb-draft-preview.squadbeyond.com/articles/_LNZafGBCXxiXzltWQA/draft?token=6309ebc69f2a2ba80b1dab722c683656

widgetマスター

モデレータ

2023年9月6日 14:07

ご要望にお応えして、Squad beyondに新しいWidgetが登場しました！

【Widget名】

ランキング順位ヘッダー（王冠・ライン・見出しテキスト）

【カテゴリー】

区切り線

【設置例】

https://sb-draft-preview.squadbeyond.com/articles/XDTXBOIoTOosLqFtFuQ/draft?token=8d93f8ef65bf2726164879b9c6a53c4e

widgetマスター

モデレータ

2023年9月7日 12:01

リクエストいただき、ありがとうございます！

残念ながら、仕様の関係上ポップアップバージョンの作成はできません。ポップアップ内部からポップアップを閉じることができないため、質問の回答として「はい」を選んだ際に、ポップアップを閉じてページの閲覧に戻るという部分が実装できません。

そのため、Widgetのご利用をご検討いただければと思います！

実装ができない旨については、今後実装できるように社内に共有させていただきます！

widgetマスター

モデレータ

2023年9月7日 14:21

原因はChromeの116アップデート（8/15～）によるものでした。アニメーション仕様が変わった影響で1回閉じたものが再展開できなくなっていたようです。

PCのときはChromeで、SPではSafariで閲覧していたため、PCでのみエラーが生じたものと推察されます。

WidgetをChromeのアップデートに対応したコードに更新しましたので、新しく設置し直すか、Javascript部分を入れ替えていただければ問題が解消するかと思います。

widgetマスター

モデレータ

2023年9月7日 14:34

基本的には指定したHTMLを元に表示をコントロールしておりますので、思い通りの表示にするにはHTMLの編集は必須のウィジェットとなっております。

表示のルールさえわかれば思い通りに表示内容をコントロール可能でございますが、HTMLに不慣れですとやや手順が複雑に感じるかもしれません。。

少々ご説明が長くなり恐れ入りますが、回答させていただきます。

最初に出てくる吹き出しの数を5個から3個に削除する方法

会話の中で出てくる吹き出しは .auto-chat-item の数だけ表示しますので、最初の会話の中の.auto-chat-itemを 5 つから 3つにする事で吹き出しの数のコントロールが可能となります。

[修正例]

<div class="auto-chat-greeting">
    <div class="auto-chat-item">
        <div class="icon">...省略...</div>
        <div class="talk-box">
            <div class="text">...吹き出し1</div>
        </div>
    </div>
    <div class="auto-chat-item">
        <div class="talk-box">
            <div class="text">...吹き出し2</div>
        </div>
    </div>
    <div class="auto-chat-item">
        <div class="talk-box">
            <div class="text">...吹き出し3</div>
        </div>
    </div>
</div>

１問目の解答後に出てくる吹き出しを最初の１つだけ残す方法

こちらの方も同様に、回答後の .auto-chat-item の数を 1つにする事で回答後の吹き出しを 1つにする事が可能でございます。

[修正例]

<div class="auto-chat-answer">
    <div class="auto-chat-item">
        <div class="icon">...省略...</div>
        <div class="talk-box">
            1つ目のアンケートを答えた後の吹き出しです。
            吹き出しは1つに調整しております。
        </div>
    </div>
</div>

質問数を計４問から５問に増やす方法

現在のHTMLの構成が、下記となっております。

・最初のあいさつのコンテンツ
・設問1のコンテンツ
・設問1の回答コンテンツ
・Q2へのボタン
・設問2のコンテンツ
・設問2の回答コンテンツ
・Q3へのボタン
・設問3のコンテンツ
・設問3の回答コンテンツ
・Q4へのボタン
・設問4のコンテンツ
・設問4の回答コンテンツ
・繰り返す質問コンテンツへのボタン
・繰り返す質問コンテンツ

修正としては冒頭にもお伝えしているように、指定したHTMLを元に表示をコントロールしておりますので、この場合は下記手順にて実施いたします。

・繰り返す質問コンテンツへのボタン と 繰り返す質問コンテンツ を削除
・Q4へのボタンをコピーしてQ5と書き換えた上、設問4の回答コンテンツの後に設置
・設問4のコンテンツ、設問4の回答コンテンツ をそれぞれコピーし、Q5へのボタンの後に設置し内容を編集

具体的にには HTMLの構成が下記となります。

<div class="auto-chat-greeting"> ...最初のコンテンツ... </div>
<div class="auto-chat-contents"> ...設問1コンテンツ... </div>
<div class="auto-chat-answer"> ... 設問1回答コンテンツ...</div>
<div class="auto-chat-next"> ...Q2へのボタン... </div>
<div class="auto-chat-contents"> ...設問2コンテンツ... </div>
<div class="auto-chat-answer"> ... 設問2回答コンテンツ...</div>
<div class="auto-chat-next"> ...Q3へのボタン... </div>
<div class="auto-chat-contents"> ...設問3コンテンツ... </div>
<div class="auto-chat-answer"> ... 設問3回答コンテンツ...</div>
<div class="auto-chat-next"> ...Q4へのボタン... </div>
<div class="auto-chat-contents"> ...設問4コンテンツ... </div>
<div class="auto-chat-answer"> ... 設問4回答コンテンツ...</div>
<div class="auto-chat-next"> ...Q5へのボタン... </div>
<div class="auto-chat-contents"> ...設問5コンテンツ... </div>
<div class="auto-chat-answer"> ... 設問5回答コンテンツ（最終コンテンツ）...</div>

また上記基本ルールの方はウィジェットの吹き出しコメントにもございますので、確認くださいませ。

widgetマスター

モデレータ

2023年9月8日 10:04

WidgetのHTML欄にテキストが入っていない タグがあるのでこちら削除してくださいませ。

<div class="board_mark14">
<p class="board_mark14_txt"></p> ←この行削除
～省略～

widgetマスター

モデレータ

2023年9月8日 10:12

CSS欄の下記2行を変更してください。

.box {
    margin: 1em auto;
    background: #ffe4e1;
    border-radius: 4px;
    border: solid #fc9db8 1px;
    max-width: 100%;
    padding: 0; /* 変更 */
    position: relative;
    box-sizing: border-box;
}

box .box-title {
    background: #db7093;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    border-radius: 4px 4px 0px 0px;
    position: relative; /* 変更 */
    line-height: 2;
    padding: 1px;
    letter-spacing: .05em;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

もしタイトルの行間が気になるようでしたらline-height を1.5などもう少し小さくしてみてください。
タイトル周りに余白をつけたい場合padding の値を大きくしてください。

widgetマスター

モデレータ

2023年9月8日 10:16

CSS欄のolタグにpadding-left を追加してください。

これが左の余白なのでお好きな数値に変更できます。

ol {
    counter-reset: list;
    list-style-type: none;
    padding-left: 10px; /* 追加 */
}

widgetマスター

モデレータ

2023年9月8日 11:15

ご自身で設置された動画の動画の再生ボタンなどの表示をなくすには、

現在設置されている動画の下記HTMLタグにある controls=”” を削除していただければと思います。

<video allowfullscreen="true" autoplay="true" controlslist="nodownload" loop="true" muted="true" name="media" playsinline="" height="306" width="544" controls="">
 ...省略...
</video>

widgetマスター

モデレータ

2023年9月8日 16:01

下記CSSのwidth が該当する指定ですので、90%などお好みの大きさに変更くださいませ。

.txt-on span {
    width: 40%; /* ここを変更 */
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    animation: puruY 1s forwards infinite;
}

widgetマスター

モデレータ

2023年9月8日 16:34

下記CSSの設定を行った上、HTML側の方にも調整が必要になります。

■ CSS の調整

.select-list>li label {
    position: relative;
    /* ↓ 以下追加 */
    display: flex; 
}
.select-list>li .select-radio {
    display: flex; /* ← block を flex に修正 */
    width: 100%;
    padding: 20px 20px 20px 50px;
    background-color: #EBEBEB;
    border: 1px solid #cccccc;
    border-radius: 10px;
    box-sizing: border-box;
    transition: background-color 0.1s, color 0.1s;
    /* ↓ 以下追加 */
    height: 125px; /* ← こちらの数値をお好みで調整して下さい */
    align-items: center;
}

■ HTMLの調整

HTML側の方は、テキストを上下中央配置にするために、

下記のように … </div> 内のテキストを

任意のタグで囲う必要がございます。

例えば、Q2の場合は下記のように … で囲います

。※テキスト部分（〇〇〇〇〇〇）のみを抜粋しております。

[ 修正前 ]

<span class="select-radio">
    〇〇〇〇〇〇<br>〇〇〇〇〇〇
</span>
<span class="select-radio">
    〇〇〇〇〇〇<br>〇〇〇〇〇〇
</span>
<span class="select-radio">
〇〇〇〇〇〇
</span>
<span class="select-radio">
    〇〇〇〇〇〇

[ 修正後 ]

<span class="select-radio">
    <p>〇〇〇〇〇〇、<br>〇〇〇〇〇〇</p>
</span>
<span class="select-radio">
    <p>〇〇〇〇〇〇<br>〇〇〇〇〇〇</p>
</span>
<span class="select-radio">
    <p>〇〇〇〇〇〇、〇〇〇〇〇〇</p>
</span>
<span class="select-radio">
    <p>〇〇〇〇〇〇</p>
</span>

少々、ご説明が分かりづらいかもしれませんので、

ご不明点などございましたらコメント欄にてご質問くださいませ。

widgetマスター

モデレータ

2023年9月11日 16:24

ご要望にお応えして、既存のWidgetを更新しました！

現在はデフォルトで、「設問２」に画像が4つ並ぶ仕様となっておりますので、どうぞご活用ください！

プレビュー：https://sb-draft-preview.squadbeyond.com/articles/uCF_sbRYcMKXNvuxA/draft?token=0e13f5fe8a75dba6927dea58a6c56818

widgetマスター

モデレータ

2023年9月12日 17:09

下記CSSを追加してくださいませ。

label input[type="radio"],
label input[type="checkbox"] {
  ...省略...
  flex: 1 0 auto; /* 追加 */
}

【修正済みイメージ】

https://squadbeyond.gyazo.com/90d21f04da8efcd58e33351492773780

widgetマスター

モデレータ

2023年9月13日 10:06

下記 Javascript の調整でいかがでしょうか？

_.setEnquete {　}

を下記に置き換えて下さい。

_.setEnquete = function(el) {
    const revealArea = el.querySelector(classes.revealArea)
    let linkBoxAll = Array.from(el.querySelectorAll(classes.questionItem));
    //追加 ↓
    const hiddenImages = el.querySelectorAll('.hidden-image');
    hiddenImages.forEach((img) => {
        img.style.display = 'none';
    });
    //追加ここまで ↑
    el.addEventListener('change', function(e) {
        let checkedLength = 0;
        let self = e.target
        let current = self.closest(classes.questionItem)
        let currentNo = Array.prototype.indexOf.call(linkBoxAll, current)
        let next;
        let scrollPoint = false;
        let noScroll = current.classList.contains("no-scroll") ? true : false;
        current.classList.remove('not-checked');
        // 下記修正と追加 ↓
        let currentHiddenImages = Array.from(current.querySelectorAll('.hidden-image'));
        let checkedInputs = Array.from(current.querySelectorAll('input'));
        if (currentHiddenImages.length && checkedInputs.length) {
            checkedInputs.forEach((input) => {
                let correspondingImage = currentHiddenImages.find(img => img.dataset.sid === input.dataset.show);
                if (correspondingImage) {
                    if (input.checked) {
                        correspondingImage.style.display = 'block';
                    } else {
                        correspondingImage.style.display = 'none';
                    }
                }
            });
        }
        //修正と追加ここまで ↑
        linkBoxAll.forEach(function(linkBox) {
            if (linkBox.querySelector('input:checked')) checkedLength++;
        })
        if (checkedLength === linkBoxAll.length) {
            revealArea.classList.remove('is-hidden')
            scrollPoint = revealArea.getBoundingClientRect().top + window.pageYOffset
        } else if (linkBoxAll.length === currentNo + 1) {
            let notChecked = linkBoxAll.filter(linkBox => !linkBox.querySelector('input:checked'));
            notChecked.forEach(linkBox => linkBox.classList.add('not-checked'));
            scrollPoint = notChecked[0].getBoundingClientRect().top + window.pageYOffset;
            noScroll = false;
        } else {
            next = linkBoxAll[currentNo + 1]
            if (next) scrollPoint = next.getBoundingClientRect().top + window.pageYOffset;
        }
        if (scrollPoint && !noScroll) {
            _.scrollTo(scrollPoint, setting.duration)
        }
    })
}

widgetマスター

モデレータ

2023年9月13日 10:58

最後の設問および最終コンテンツがWidgetの仕様に沿っていないために生じております。

Widgetの仕様通り、最後の設問および最終コンテンツも他の設問と同じHTML構成にする事で、ご要望通りの動作となります。

修正の流れとしましては下記になります。

最後の設問に設定されているページ内リンクの a タグを削除
矢印のHTMLを設問と同じHTML内に設置
お好みに応じて、横線を削除してデザインを整える

1. 最後の設問に設定されているページ内リンクの a タグを削除

[ 修正前 ]

<a href= "#heading1" draggable='false'> ※ここを削除する
  <div class="questionArea js-form-radio">
    <h2 class="title">ボディアーキのどこに魅力を感じますか？</h2>
      ... 省略 ...
　<a/>※ここを削除する

[ 修正後 ]

<div class="questionArea js-form-radio">
  <h2 class="title">ボディアーキのどこに魅力を感じますか？</h2>
  ... 省略 ...
</div>

2. 矢印のHTMLを設問と同じHTML内に設置

現在Widget外に設置されている矢印のWidgetを、設問と同じHTML内に設置します。

CSSもまるっと切り取ってアンケートのCSSの一番下に挿入してください。

なお、コードを移した後は、もともと設置していた矢印のWidgetは削除してください。

<div class="questionArea js-form-radio">
  ... 設問1 ...
</div>
<div class="questionArea js-form-radio">
  ... 設問2 ...
</div>
<div class="questionArea js-form-radio">
  ... 設問3 ...
</div>
<div class="questionArea js-form-radio">
  ... 設問4 ...
</div>
<div class="questionArea js-form-radio"> 　※追加箇所ここから
 <div class="cp_arrows">
    <div class="cp_arrow cp_arrowfirst"></div>
    <div class="cp_arrow cp_arrowsecond"></div>
</div>
  </div>　　※追加箇所ここまで
</form>
</div>

3. お好みに応じて、横線を削除してデザインを整える

ステップ2までHTMLを編集すると、矢印の下に横線が発生します。

この横線を削除したい場合は、CSS内を以下のように調整してください。

[ 修正前 ]

 .question-reveal-scroll .questionArea {
  margin-bottom: 30px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #cccccc; ※none　に変更
}

[ 修正後]

 .question-reveal-scroll .questionArea {
  margin-bottom: 30px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  border-bottom: none; 
}

widgetマスター

コミュニティのコメント