Wednesday, 19 June 2013

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.




2 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