Skip to main content

Creating a Restricted Multiple Choice Form With Apps Script

I was contacted and asked if I could create a Google Form where the user can only check 8 out of 16 checkbox choices. Google Forms can't do this sort of restriction and so I whipped together a quick web application to do this.
I created an Apps Script in Google Drive and then added this code below.

function doGet(e) {
  var app = UiApp.createApplication().setTitle("Restricted Multiple Choice").setHeight(250).setWidth(500)
  
  // Define the grid layout
  var grid = app.createGrid(16, 3 ).setStyleAttribute(3, 2, "width", "420px").setCellPadding(5)
  grid.setStyleAttribute("margin-left", "auto")
  grid.setStyleAttribute("margin-right", "auto")
  grid.setStyleAttribute("margin-top", "100px")
  
  // Create the text at the top
  var html = ''
  html += "Restricted Multiple Choice"
  html +=  "You can only choose 3 of the items below."
  var html_widget = app.createHTML(html, false)
  grid.setWidget(1, 2, html_widget)
  
  // Create the checkboxes
  var select = app.createServerHandler('selectHandler').addCallbackElement(grid)
  
  var checkbox_1 = app.createCheckBox("Item 1").setId("item_1").addValueChangeHandler(select).setName("item_1")
  grid.setWidget(3, 2, checkbox_1)
  
  var checkbox_2 = app.createCheckBox("Item 2").setId("item_2").addValueChangeHandler(select).setName("item_2")
  grid.setWidget(4, 2, checkbox_2)
  
  var checkbox_3 = app.createCheckBox("Item 3").setId("item_3").addValueChangeHandler(select).setName("item_3")
  grid.setWidget(5, 2, checkbox_3)
  
  var checkbox_4 = app.createCheckBox("Item 4").setId("item_4").addValueChangeHandler(select).setName("item_4")
  grid.setWidget(6, 2, checkbox_4)
  
  var checkbox_5 = app.createCheckBox("Item 5").setId("item_5").addValueChangeHandler(select).setName("item_5")
  grid.setWidget(7, 2, checkbox_5)
  
  var checkbox_6 = app.createCheckBox("Item 6").setId("item_6").addValueChangeHandler(select).setName("item_6")
  grid.setWidget(8, 2, checkbox_6)
  
  var checkbox_7 = app.createCheckBox("Item 7").setId("item_7").addValueChangeHandler(select).setName("item_7")
  grid.setWidget(9, 2, checkbox_7)
  
  // Create the "convert" button
  var handler2 = app.createServerHandler('submitHandler').addCallbackElement(grid);
  var convert_button = app.createButton('Submit Selection', handler2).setId("btn")
  grid.setWidget(10, 2, convert_button)
  
  // Create the message at the bottom
  var msg = app.createHTML("Please make only three choices.", false).setId("msg")
  grid.setWidget(11, 2, msg)
  
  
  app.add(grid);
  return app
}
function submitHandler(e){ 
  var app = UiApp.getActiveApplication( )
  
  var msg = app.getElementById("msg")
  msg.setVisible( true )
  msg.setText( "This doesn't do anything yet" )
  
  return app
  
}
function selectHandler(e){
  var count = 0
  if ( e.parameter['item_1'] == 'true' ){
    count = count + 1 
  }
  if ( e.parameter['item_2'] == 'true' ){
    count  = count + 1 
  }
  if ( e.parameter['item_3'] == 'true' ){
    count  = count + 1 
   }
  if ( e.parameter['item_4'] == 'true' ){
    count  = count + 1 
  }
  if ( e.parameter['item_5'] == 'true' ){
    count  = count + 1 
  }
  if ( e.parameter['item_6'] == 'true' ){
    count  = count + 1
  }
  if ( e.parameter['item_7'] == 'true' ){
    count  = count + 1 
  }
  
  
  var app = UiApp.getActiveApplication( )
  var msg = app.getElementById("msg")
  var btn = app.getElementById("btn")
  if ( count > 3 ){
    btn.setVisible(false)
    msg.setText( "You have chosen more than three items" )
  }else{
    btn.setVisible(true)
    msg.setText( "You have chosen " + count + " items." )   
  }
  return app
  
}



The application itself looks like this, the submit button is only clickable once you've clicked three checkboxes.
The resulting application is here, give it a whirl.
https://script.google.com/a/macros/york.ac.uk/s/AKfycbwczyQumF8qax2HGoZt9K-RzzY7ItWdKSvyH_aQq2p-PQ9vXNiF/exec


If you'd like to make a copy of the application's code to figure out how it works, the Apps Script code is here:
https://script.google.com/d/1h3PsyWZ2qNxyTDpDPP4__f-_0LjhysLti9NmHMRUCB6ktB2nrcPgvxYT/edit?usp=sharing


In Conclusion

This unusual little app is one of many that I'm currently exploring. Lots of people believe that what they want is a simple form for gathering data, but are finding out that they want the data to be "intelligent" and dependant on other items selected.

Just because it walks like a form, looks like a form and quacks like a form, doesn't meant it's a form.




Comments

  1. Your article is very good and the quality, I Obat Bius really like all
    thanks for the share article

    ReplyDelete
  2. Tom,

    Nice script and very apt for a requirement I have to capture causal factors in a Google Sheet. I used your concept and have got the script working, but the user can opt out of checking the boxes by using the closure "X" in the top right corner. Your sample seems to eliminate that option but I can't figure out how. Can you please advise?

    Thanks!
    Bill

    ReplyDelete

Post a Comment

Popular posts from this blog

Inserting A Google Doc link into a Google Spreadsheet

This article looks at using Apps Script to add new features to a Google Spreadsheet.

At the University of York, various people have been using Google spreadsheets to collect together various project related information. We've found that when collecting lots of different collaborative information from lots of different people that a spreadsheet can work much better than a regular Google Form.

Spreadsheets can be better than Forms for data collection because:

The spreadsheet data saves as you are editing.If you want to fill in half the data and come back later, your data will still be there.The data in a spreadsheet is versioned, so you can see who added what and when and undo it if necessaryThe commenting features are brilliant - especially the "Resolve" button in comments.
One feature we needed was to be able to "attach" Google Docs to certain cells in a spreadsheet. It's easy to just paste in a URL into a spreadsheet cell, but they can often all look too si…

Writing a Simple QR Code Stock Control Spreadsheet

At Theatre, Film & TV they have lots of equipment they loan to students, cameras, microphone, tripod etc. Keeping track of what goes out and what comes back is a difficult job. I have seen a few other departments struggling with the similar "equipment inventory" problems.

A solution I have prototyped uses QR codes, a Google Spreadsheet and a small web application written in Apps Script. The idea is, that each piece of equipment ( or maybe collection of items ) has a QR code on it. Using a standard and free smartphone application to read QR codes, the technician swipes the item and is shown a screen that lets them either check the item out or return it.

The QR app looks like this.



The spreadsheet contains a list of cameras. It has links to images and uses Google Visualisation tools to generate its QR codes. The spreadsheet looks like this.


The Web Application The web application, which only checks items in or out and should be used on a phone in conjunction with a QR cod…

Getting CSV data into Google Spreadsheets Automatically

Today I was attempting to get CSV data from Estates' Alarm System into Google Docs as a spreadsheet. There were two ways to try and achieve this...


Create an AppScript in Google that pulled a .CSV file from a web serverWrite a (python) script on the local machine that pushed the data into Google Spreadsheet by using the API. The Google AppScript Way As you know, my JavaScript ain't great, but it initially looked like it was going to work... Some code like this below and using the Array to CSV functions from here, looked promising.



function encode_utf8( s ){
//This is the code that "I think" turns the UTF16 LE into standard stuff....
return unescape( encodeURIComponent( s ));
}

function get_csv(){
var url ='http://www-users.york.ac.uk/~admn812/alarms.csv.Active BA Alarms.csv';// Change this to the URL of your file
var response = UrlFetchApp.fetch(url);
// If there's an error in the response code, maybe tell someone
//MailApp.sendEmail("s.brown@york.ac.uk&qu…