• コミュニティ

  吹き出しを削除する方法を知りたいです！

  トピックス by widget初心者 1792 pt  2023年9月6日 17:25 254 PV

  【Widget名】

  自動応答チャット形式アンケート（選択肢による回答・単一/複数選択・繰り返しの質問コンテンツ付き）※要javascript

  【修正したいこと】

  • 最初に出てくる吹き出しの数を5個から3個に削除したいです
  • １問目の解答後に出てくる吹き出しは、最初の１つだけ残してあとの２つを削除したいです
  • 質問数を計４問から５問に増やしたいです

  【参考画像】

  https://drive.google.com/file/d/1-2z56V_ViDYQ-GpGm7xg_SA36MftpT3p/view

  【参考ページ】

  https://sb-draft-preview.squadbeyond.com/articles/RepJEqhwgGguiis-zcA/draft?token=63283727554bbd1eafc4fad6629c14cc

  widgetマスター   1 年, 2 月前 2 人 · 1 コメント

  • widget
  • アンケート
  • 自動応答チャット形式アンケート（選択肢による回答・単一/複数選択・繰り返しの質問コンテンツ付き）※要javascript
• 1 コメント

• 

  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>

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

Log In to Reply