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

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

要件

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

ユースケース

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

動作を確認する

手順

1. フォームを作成し、次の詳細を設定します。

フォーム	フォームリンク名	フィールドタイプ	フィールド名	フィールドリンク名
画像	画像	画像	画像	画像
Question	Question	追加メモ	メモ	plain
Question	Question	ラジオボタン	What will replace the Question Mark?	What_will_replace_the_Question_Mark

ここから、選択肢と質問を画像として画像フォームに追加します。質問は画像フィールドで、回答は複数の画像から選択する形式になります。これらのデータをフォームに挿入します。

2. 次に、アップロードした画像の URL を取得してフォームに挿入する方法を確認します。画像の URL を取得する関数を作成し、それを再構成する方法を考えます。関数を作成し、名前を getAllImages として画像の URL を取得します。

メモ: アップロードしたファイルはウイルススキャンされます。アップロードしたファイルにウイルスが含まれている場合は、別のファイルをアップロードする必要があります。

3. 次のコードを Deluge エディターに追加します。

void getAllImages()
{
for each 画像 in 画像[ID != null]
{
info 画像。画像;
<Insert Snippet 1 >
< Insert Snippet 2 >
}
}

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/ の後ろから最初の シングルクォート (') （ \ でエスケープ）までの接尾語を取得します。

//アップロードした画像のファイル名を取得
fileName = 画像。画像。getSuffix('/image/').getPrefix('\'');
info fileName;

この info ステートメントは、アップロードした画像ファイルの名前を 1625047562073_Question。png として出力します。

スニペット 2:

次に、画像 URL を構成します。

//画像 URL を構成
img = ' https://creatorexport.zoho.com/file/' + Zoho。appuri + 'All_Images/' + 画像。ID + '/Image/image-download?filepath=/' + fileName;
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. 以下のコードを挿入して、質問画像を表示します:

<div>
<div>
<img src = ' <関数から取得した質問の URL を貼り付け> '>
<br>
</div>
<div>
<br>
</div>
<style>
// 質問名を少し大きく表示します。
.zc-What_will_replace_the_Question_Mark-グループ .form-ラベル span { フォント-size: 1。5rem }
</style>
</div>
<div>
<br>
</div>

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

7. [ 新しいアクションを追加 ] をクリックし、以下のコードを Deluge エディター に追加します。これは、 手順 4 で作成した画像 URL です。

for each 画像 in 画像[ID != <QuestionID>]
{
fileName = 画像。画像。getSuffix('downqual = \'').getSuffix('画像/').getPrefix('\'');
img = '<img src=\' https://creatorexport.zoho.com/file/' + Zoho。appuri + 'All_Images/' + 画像。ID + '/Image/image-download?filepath=/' + fileName + '\'/>';
input。What_will_replace_the_Question_Mark:ui。追加する(img);
}