Thursday 13 November 2014

Question framework for govuk sites

Online forms


I've spent most of my career working on government projects, creating websites which ask a set of questions and collect data.  On every project I work on, we seemingly reinvent the same thing,   This is where GDS have really added value, by creating a common set of libraries and tools to standardize how gov.uk sites look and feel.

What's missing, is a common approach to writing questionnaire type applications.  That's why I developed doopgovuk.


Doopgovuk


Doop is a Ruby on Rails question framework for govuk sites, inspired by the work GDS have done to standardize the cross government internet presence.  It allows you to easily create a questionnaire using a simple DSL.  The results are amazing.  It looks even better on a mobile device.

Try out the Child Benefit Demo developed with doop.




Self Assessment Demo which uses radio / button combo's to answer questions:



Getting started

Assuming ruby, rails and nodejs is installed:

sudo apt-get install qt4-dev-tools libqt4-dev libqt4-core libqt4-gui xvfb

These are needed to support the headless capybara test suite.

$ rails new govsite
$ cd govsite
$ echo "gem 'doop'" >> Gemfile
$ bundle
$ rails generate doopgovuk demo
$ rails s

Navigate to http://localhost:3000/demo/index


The DSL


When developing a doop application, to get a feel for what's involved, I've outlined some of the steps:

1) Start by defining a YAML structure which lists all the questions to be asked (see here):

page: {
  preamble: {
   _page: "preamble",
   _nav_name: "Preamble",
   income_more_than_50000: {
   _question: "Do you have an income of more than £50,000 a year ?"
  },
  do_you_still_want_to_apply: {
    _question: "Do you still want to apply for child benefit?"
  },
  proof_of_id: {
    _question: "We need proof of your identity",
    _answer: {}
  }
},

2) You then define a set of handlers which are called whenever a question is answered:

on_answer "/page/preamble/enrolled_before"  do |question,path, params, answer|
  answer_with( question, { "_summary" => answer } )
end
on_answer "/page/preamble/enrolled_before"  do |question,path, params, answer|
  answer_with( question, { "_summary" => answer } )
  enable( "/page/preamble/year_last_applied", answer == "Yes" )
end
3) And finally write the .erb to display the questions (see here):

%=question_form doop, res do %>
  <%=question "/page/preamble" do |root, answer| %>

    <%=question "/page/preamble/income_more_than_50000" do |root,answer| %>
      <button name="b_answer" value="Yes">Yes</button><br/>
      <button name="b_answer" value="No"></button>
    <% end %>

    <%=question "/page/preamble/do_you_still_want_to_apply" do |root,answer| %>
      <button name="b_answer" value="Yes">Yes, I still want to apply for child benefit</button
    <% end %>

    <% when_answered "/page/preamble" do %>
      <button>Continue and Save</button>
    <% end %>

  <% end %>
<% end %>


Give it a go...


Links


Doop github project

Child Benefit Demo

Self Assessment Demo

GDS

GOV UK Elements

2 comments:

  1. Hi Mark,

    hope all is well.

    Thought I would let you know that before I left they were switching from a binary button approach to radio and button combo approach.

    If you see the radio buttons here: http://govuk-elements.herokuapp.com/

    I don't know if this helps you at all.

    All the best :)

    ReplyDelete
  2. Hi Chris!

    Thanks for the update. I haven't seen the gov.uk elements site before - what a great resource.

    I've created a demo which uses radio buttons, though it still needs a bit of work on the css styling:

    http://blooming-wave-8670.herokuapp.com/sasdemo/index

    The rails erb file supporting the new radio button styling can be found here:

    https://github.com/coder36/doop/blob/master/demo/app/views/sasdemo/_quick_check.html.erb

    Thanks again Chris.

    ReplyDelete