1.1 --- a/app/main/survey/participate.lua	Tue Oct 12 15:37:28 2021 +0200
     1.2 +++ b/app/main/survey/participate.lua	Tue Oct 12 15:59:25 2021 +0200
     1.3 @@ -9,6 +9,7 @@
     1.4  end
     1.5  
     1.6  local question
     1.7 +local question_number = #survey.questions
     1.8  
     1.9  if survey_member then
    1.10    local answer_set = survey_member.answer_set
    1.11 @@ -20,6 +21,7 @@
    1.12      for i, q in ipairs(survey.questions) do
    1.13        if not question and not answers_by_question_id[q.id] then
    1.14          question = q
    1.15 +        question_number = i - 1
    1.16        end
    1.17      end
    1.18    end
    1.19 @@ -30,15 +32,25 @@
    1.20    ui.cell_main{ content = function()
    1.21  
    1.22      ui.container{ attr = { class = "mdl-card mdl-card__fullwidth mdl-shadow--2dp survey" }, content = function()
    1.23 -      ui.container{ attr = { class = "mdl-card__title mdl-card--border" }, content = function()
    1.24 +      ui.container{ attr = { class = "mdl-card__title" }, content = function()
    1.25          ui.heading { attr = { class = "mdl-card__title-text" }, level = 2, content = function()
    1.26            if survey_member.finished then
    1.27              slot.put(survey.finished_title)
    1.28            else
    1.29 -            ui.tag{ content = question.question }
    1.30 +            ui.tag{ tag = "span", content = question.question }
    1.31 +            ui.tag{ attr = { class = "survey_counter" }, content = (question_number + 1) .. " / " .. #survey.questions }
    1.32            end
    1.33          end }
    1.34        end }
    1.35 +      slot.put('<div id = "progressbar1" style="width: 100%;" class = "mdl-progress mdl-js-progress"></div>')
    1.36 +      
    1.37 +      ui.script{ script = [[
    1.38 +        document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded', 
    1.39 +            function() {
    1.40 +            this.MaterialProgress.setProgress(]] .. question_number / #survey.questions * 100 .. [[);
    1.41 +         }); 
    1.42 +      
    1.43 +      ]] }
    1.44        ui.container{ attr = { class = "mdl-card__content mdl-card--border" }, content = function()
    1.45          if survey_member.finished then
    1.46            ui.container{ content = function()
    1.47 @@ -62,6 +74,7 @@
    1.48                error = { mode = "forward", module = "survey", view = "participate" },
    1.49              },
    1.50              content = function()
    1.51 +            
    1.52                ui.field.hidden{ name = "question_id", value = question.id }
    1.53  
    1.54                if question.answer_type == "radio" then

     2.1 --- a/static/lf4.css	Tue Oct 12 15:37:28 2021 +0200
     2.2 +++ b/static/lf4.css	Tue Oct 12 15:59:25 2021 +0200
     2.3 @@ -741,6 +741,11 @@
     2.4    margin-top: 0;
     2.5  }
     2.6  
     2.7 +.survey_counter {
     2.8 +  position: absolute;;
     2.9 +  right: 20px;
    2.10 +}
    2.11 +
    2.12  .trace_list {
    2.13    margin-left: 10px;
    2.14    list-style-type: none;