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.

Browse More Articles

Tweet

Written by Unknown

We are one of the initiators of the development of information technology in understanding the need for a solution that is familiar and close to us.