• 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>

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

    こちらの方も同様に、回答後の .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>

    質問数を計4問から5問に増やす方法

    現在の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>

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