質問の選択肢として画像を使用する方法

質問の選択肢として画像を使用する方法

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

要件

質問を含むフォームで、各質問の回答として画像形式の複数選択肢を用意する必要があります。  

ユースケース

なぞなぞアプリケーションを作成し、さまざまな種類の質問を一覧表示する Questions フォームを用意します。1 つの質問には複数の選択肢があります。一部の質問では、回答を画像から選択する必要があるため、選択肢を画像として用意します。
 
動作を確認する

手順

1. フォームを作成  し、次の詳細を設定します。
フォーム
フォームリンク名
フィールドタイプ
フィールド名
フィールドリンク名
画像
画像
画像
画像
画像
Question
Question
追加メモ
メモ
plain
ラジオボタン
What will replace the Question Mark?
What_will_replace_the_Question_Mark
 
ここから、選択肢と質問を画像として 画像 フォームに追加します。質問は画像フィールドで、回答は複数の画像から選択する形式になります。これらのデータをフォームに挿入します。
 
2. 次に、アップロードした画像の URL を取得してフォームに挿入する方法を確認します。画像の URL を取得する関数を作成し、それを再構成する方法を考えます。 関数を作成 し、名前を getAllImages として画像の URL を取得します。
メモ: アップロードしたファイルはウイルススキャンされます。アップロードしたファイルにウイルスが含まれている場合は、別のファイルをアップロードする必要があります。


3. 次のコードを Deluge エディターに追加します。
  1. void getAllImages()
  2. {
  3. for each 画像 in 画像[ID != null]
  4. {
  5. info 画像。画像;
  6. <Insert Snippet 1 >
  7. < Insert Snippet 2 >
  8. }
  9. }
info ステートメント（折れ線グラフ No 5）は、画像の URL を次のように出力します。

<img src = ' https://creatorexport.zoho.com/sharedBy/appLinkName/viewLinkName/fieldName/image/ 1625047562073_Question。png' lowqual = ' https://creatorexport.zoho.com/sharedBy/appLinkName/viewLinkName/fieldName/image/1625047562073_710' medqual = ' https://creatorexport.zoho.com/sharedBy/appLinkName/viewLinkName/fieldName/image/1625047562073_710' downqual =
' https://creatorexport.zoho.com/sharedBy/appLinkName/viewLinkName/fieldName/image/1625047562073_Question.png' border = '0'></img>
太字部分のテキストが、保存されているアップロードファイルの名前です。これを 画像 フィールド値から分割して取得する必要があります。その他の方法については 注意事項 を参照してください。
 
スニペット 1:
上記の下線部のように、 /image/ の後ろから最初の シングルクォート (') （ \ でエスケープ）までの接尾語を取得します。
  1. //アップロードした画像のファイル名を取得
  2. fileName = 画像。画像。getSuffix('/image/').getPrefix('\'');
  3. info fileName;
この info ステートメントは、アップロードした画像ファイルの名前を 1625047562073_Question。png として出力します。
 
スニペット 2:
次に、画像 URL を構成します。
  1. //画像 URL を構成
  2. img = ' https://creatorexport.zoho.com/file/' + Zoho。appuri + 'All_Images/' + 画像。ID + '/Image/image-download?filepath=/' + fileName;
  3. info img;
上記のスニペットの結果、次のようになります: 'https://creatorexport.zoho.com/file' + /scopeName/appLinkName/ + reportLinkName + 画像.ID + '/Image/image-download?filepath=/' + fileName ;
パラメーター
値
説明
/scopeName/appLinkName/
Zoho.appuri
このシステム変数は、URL に必須となるスコープ名とアプリケーションのリンク名を返します。
reportLinkName
All_Images/
画像フォームのレポートリンク名
画像.ID
<19 digit データ ID>
対象の画像のデータリンク ID
fileName
1625047562073_Question.png
アップロードされ保存されている画像の名前

4. 「 Questions 」フォームで、 メモ 項目をクリックし、続いて HTML を編集 アイコンをクリックします。

5. 以下のコードを挿入して、質問画像を表示します:
  1. <div>
  2. <div>
  3. <img src = ' <関数から取得した質問の URL を貼り付け> '>
  4. <br>
  5. </div>
  6. <div>
  7. <br>
  8. </div>
  9. <style>
  10. // 質問名を少し大きく表示します。
  11. .zc-What_will_replace_the_Question_Mark-グループ .form-ラベル span { フォント-size: 1。5rem }
  12. </style>
  13. </div>
  14. <div>
  15. <br>
  16. </div>

6. 「 Question 」フォームの読み込み時にこの設定を画像として表示するため、 フォームワークフローを作成 し、 フォームの読み込み時に実行されるようにします。


7. [ 新しいアクションを追加 ] をクリックし、以下のコードを Deluge エディター に追加します。これは、 手順 4 で作成した画像 URL です。
  1. for each 画像 in 画像[ID != <QuestionID>]
  2. {
  3. fileName = 画像。画像。getSuffix('downqual = \'').getSuffix('画像/').getPrefix('\'');
  4. img = '<img src=\' https://creatorexport.zoho.com/file/' + Zoho。appuri + 'All_Images/' + 画像。ID + '/Image/image-download?filepath=/' + fileName + '\'/>';
  5. input。What_will_replace_the_Question_Mark:ui。追加する(img);
  6. }

これにより、「 What will 置き換える the Question 設定? 」項目に対して、設定が画像として読み込まれます。

動作を確認

注意点

  1. 手順 4 では、/image/ のインデックスを使用してファイルの名前を取得しました。以下のように downqual と lowqual を使用して、ファイル名を取得することもできます。
  1. //lowqual の使用
  2. 画像。画像。getPrefix('lowqual = \'').getSuffix('画像/').getprefix('\'');
  3. //downqual の使用
  4. 画像。画像。getSuffix('downqual = \'').getSuffix('画像/').getPrefix('\'');