Having Images as choices for a question

Having Images as choices for a question

Requirement

A form containing questions must have multiple choices in image format as answers for each question.  

Use Case

A brain-teaser application is built that has a Questions form, which lists all kinds of questions. A question has multiple options to choose from. For some questions the answers need to be chosen among images, so the options need to be images.
 

Steps to follow

1.  Create the forms  with the following details:
Form
Form Link Name
Field Type
Field Name
Field Link Name
Images
Images
Image
Image
Image
Question
Question
Add Notes
Notes
plain
Radio
What will replace the Question Mark?
What_will_replace_the_Question_Mark
 
We shall now add the options and the question as images to the Images form. The question will be an Image field and the answer will be to choose from a set of Image choices. Insert those records to the form.
 
2.  Next, let's learn how to get the uploaded images' URL to insert them to our form. We shall create a function to get the image's URL and devise a way to reconstruct them. Create a function named, getAllImages to get the image URLs.
Note: The files that you upload will be scanned for any virus. You will have to upload a different file if the uploaded file contains a virus.


3. Add the below code in the Deluge Editor:
  1. void getAllImages()
  2. {
  3.  for each image in Images[ID != null]
  4.  {
  5.   info image.Image;
  6. <Insert Snippet 1 >
  7. < Insert Snippet 2 >
  8.  }
  9. }
The Info Statement (Line no 5) prints the image URL as below: 

<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>
The bold part of the text is the name of the uploaded file stored. We need to split that from the Image field value. Other methods are explained in the Points To Note .
 
Snippet 1:
Let's get the suffix of the /image/ until the first double quote (") (escaped with \ ), as shown underlined above:
  1. //Get the uploaded image's file name
  2. fileName = image.Image.getSuffix("/image/").getPrefix("\"");
  3. info fileName;
This info statement will print the name of the uploaded image file name as 1625047562073_Question.png
 
Snippet 2:
Next, let's construct the image URL:
  1. //Construct the image URL
  2. img = " https://creatorexport.zoho.com/file/" + zoho.appuri + "All_Images/" + image.ID + "/Image/image-download?filepath=/" + fileName;
  3. info img;
The above snippet will result in: " https://creatorexport.zoho.com/file" + /scopeName/appLinkName/ + reportLinkName + image.ID + "/Image/image-download?filepath=/" + fileName ;
Parameter
Value
Description
/scopeName/appLinkName/
zoho.appuri
This system variable gives the scope name and the application's link name as required in the URL
reportLinkName
All_Images/
The report link name of the Images form
image.ID
<19 digit record ID>
Record link ID of the needed image
fileName
1625047562073_Question.png
Name of the image uploaded as stored

4.  In the Questions form, click the Notes field, then click the Edit HTML icon.

5.  Insert the below code to display the question image:
  1. <div>
  2.     <div>
  3.         <img src = " <Paste the question URL from the function> ">
  4.         <br>
  5.     </div>
  6.     <div>
  7.         <br>
  8.     </div>
  9.     <style>
  10. //Make the question name look a bit bigger.
  11.         .zc-What_will_replace_the_Question_Mark-group .form-label span { font-size: 1.5rem }
  12.     </style>
  13. </div>
  14. <div>
  15.     <br>
  16. </div>

6. To show the options on the load of the Question form, let us create a workflow to execute during the load of the form.


7.  Click  Add New Action and add the below code in the Deluge Editor . These are the image URLs that were constructed in Step 4 .
  1. for each image in Images[ID != <QuestionID>]
  2. {
  3. fileName = image.Image.getSuffix("downqual = \"").getSuffix("image/").getPrefix("\"");
  4. img = "<img src=\" https://creatorexport.zoho.com/file/" + zoho.appuri + "All_Images/" + image.ID + "/Image/image-download?filepath=/" + fileName + "\"/>";
  5. input.What_will_replace_the_Question_Mark:ui.add(img);
  6. }

This will load the options as images for the What will replace the Question Mark? field.

See how it works

Points To Note

  1. In Step 4, we have found the name of the file using the index of /image/. We can also use downqual and lowqual, as shown below, to find the file name:
  1. //Using lowqual
  2. image.Image.getPrefix("lowqual = \"").getSuffix("image/").getprefix("\"");  
  3. //Using downqual
  4. image.Image.getSuffix("downqual = \"").getSuffix("image/").getPrefix("\"");

      Create. Review. Publish.

      Write, edit, collaborate on, and publish documents to different content management platforms.

      Get Started Now


        Access your files securely from anywhere

          Zoho CRM Training Programs

          Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

          Zoho CRM Training
            Redefine the way you work
            with Zoho Workplace

              Zoho DataPrep Personalized Demo

              If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

              Zoho CRM Training

                Create, share, and deliver

                beautiful slides from anywhere.

                Get Started Now


                  Zoho Sign now offers specialized one-on-one training for both administrators and developers.

                  BOOK A SESSION







                              Quick LinksWorkflow AutomationData Collection
                              Web FormsRetailOnline Data Collection Tool
                              Embeddable FormsBankingBegin Data Collection
                              Interactive FormsWorkplaceData Collection App
                              CRM FormsCustomer ServiceForms for Solopreneurs
                              Digital FormsMarketingForms for Small Business
                              HTML FormsEducationForms for Enterprise
                              Contact FormsE-commerceForms for any business
                              Lead Generation FormsHealthcareForms for Startups
                              Wordpress FormsCustomer onboardingForms for Small Business
                              No Code FormsConstructionRSVP tool for holidays
                              Free FormsTravelFeatures for Order Forms
                              Prefill FormsNon-Profit
                              Forms for Government
                              Intake FormsLegal
                              Mobile App
                              Form DesignerHR
                              Mobile Forms
                              Card FormsFoodOffline Forms
                              Assign FormsPhotographyMobile Forms Features
                              Translate FormsReal EstateKiosk in Mobile Forms
                              Electronic FormsInsurance
                              Drag & drop form builder

                              Notification Emails for FormsAlternativesSecurity & Compliance
                              Holiday FormsGoogle Forms alternative GDPR
                              Form to PDFJotform alternativeHIPAA Forms
                              Email FormsWufoo alternativeEncrypted Forms
                              Accessible FormsTypeform alternativeSecure Forms

                              WCAG

                                          Create. Review. Publish.

                                          Write, edit, collaborate on, and publish documents to different content management platforms.

                                          Get Started Now






                                                            You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                                                Manage your brands on social media

                                                                  Use cases

                                                                  Make the most of Zoho Desk with the use cases.

                                                                   
                                                                    

                                                                  eBooks

                                                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho Desk.

                                                                   
                                                                    

                                                                  Videos

                                                                  Watch comprehensive videos on features and other important topics that will help you master Zoho Desk.

                                                                   
                                                                    

                                                                  Webinar

                                                                  Sign up for our webinars and learn the Zoho Desk basics, from customization to automation and more

                                                                   
                                                                    
                                                                  • Desk Community Learning Series


                                                                  • Meetups


                                                                  • Ask the Experts


                                                                  • Kbase


                                                                  • Resources


                                                                  • Glossary


                                                                  • Desk Marketplace


                                                                  • MVP Corner



                                                                    Zoho Sheet Resources

                                                                     

                                                                        Zoho Forms Resources


                                                                          Secure your business
                                                                          communication with Zoho Mail


                                                                          Mail on the move with
                                                                          Zoho Mail mobile application

                                                                            Stay on top of your schedule
                                                                            at all times


                                                                            Carry your calendar with you
                                                                            Anytime, anywhere




                                                                                  Zoho Sign Resources

                                                                                    Sign, Paperless!

                                                                                    Sign and send business documents on the go!

                                                                                    Get Started Now




                                                                                            Zoho TeamInbox Resources





                                                                                                      Zoho DataPrep Demo

                                                                                                      Get a personalized demo or POC

                                                                                                      REGISTER NOW


                                                                                                        Design. Discuss. Deliver.

                                                                                                        Create visually engaging stories with Zoho Show.

                                                                                                        Get Started Now









                                                                                                                            • Related Articles

                                                                                                                            • Creating a questionnaire with matrix choices

                                                                                                                              Requirement Create a matrix-type (horizontal layout of choices) questionnaire to get feedback. Use Case A flight booking application is used by multiple users. The users use it to book flights, after which a feedback form is sent to them to request ...
                                                                                                                            • Understand Radio Field

                                                                                                                              The Radio field enables your users to select a value from a predefined set of choices that are displayed as radio buttons. Note: Radio fields do not support search or auto-completion. They are best suited for presenting a small set of mutually ...
                                                                                                                            • Provide a link in a form, through notes field

                                                                                                                              Requirement Open a link containing instructions required to fill a form. Use Case For any customer to use an application, registration is the first step. A registration form has some general instructions for filling the form. It would be best if they ...
                                                                                                                            • Add and import choices

                                                                                                                              Add and import choices in a choice field Applicable to the following choice fields: Drop down , radio , multi select , and checkbox . Zoho Creator offers the following options for adding choices to the above-mentioned fields. Choose that which works ...
                                                                                                                            • How to display images dynamically on a subform row based on the lookup field selection

                                                                                                                              The images stored in a form can be retrieved and displayed dynamically within subforms. When users select a record from a lookup field in a subform row, relevant images associated with that record can appear in a designated rich text field within the ...
                                                                                                                              Wherever you are is as good as
                                                                                                                              your workplace

                                                                                                                                Resources

                                                                                                                                Videos

                                                                                                                                Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                                eBooks

                                                                                                                                Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                                Webinars

                                                                                                                                Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                                CRM Tips

                                                                                                                                Make the most of Zoho CRM with these useful tips.



                                                                                                                                  Zoho Show Resources