Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

make progressbar more flexible and optionaly independent from visible pages

See original GitHub issue

Are you requesting a feature, reporting a bug or asking a question?

question, if not possible, then feature

What is the current behavior?

i have 20 nested questions (with visibleif-conditions). currently the progressbar show only visible pages, and therefore the progressbar shows in start-position always 100% (because nothing clicked and no page is visible), and only after clicking an answer, the progressbar show 50%, because the next question ist unlocked/visible. start: answer first question:

What is the expected behavior?

my expectation is, the progressbar count all pages and current progress show the position of the page. would be nice, if Survey-object has an option or somthing else, to set the progressbar independently from visible pages and count always from ALL pages. and the progress-result need just show the current-position of the pages. start-position:

How would you reproduce the current behavior (if this is a bug)?

look at code

Provide the test code and the tested page URL (if applicable)

Test-URL Page: https://plnkr.co/edit/ANQujBliB3HZQo69NZE4?p=preview

app.js

Survey
  .StylesManager
  .applyTheme("default");

var json = {
  title: "Software developer survey.",
  pages: [{
    title: "What operating system do you use?",
    questions: [{
      type: "checkbox",
      name: "opSystem",
      title: "OS",
      hasOther: true,
      isRequired: true,
      choices: ["Windows", "Linux", "Macintosh OSX"]
    }]
  }, {
    title: "What language(s) are you currently using?",
    questions: [{
      type: "checkbox",
      name: "langs1",
      visibleIf: "{opSystem} contains 'Linux'",
      title: "Plese select from the list",
      colCount: 4,
      isRequired: true,
      choices: [
        "Javascript",
        "Java",
        "Python",
        "CSS",
        "PHP",
        "Ruby"
      ]
    }]
  }, {
    title: "What language(s) are you currently using?",
    questions: [{
      type: "checkbox",
      name: "langs2",
      visibleIf: "{opSystem} contains 'Windows'",
      title: "Plese select from the list",
      colCount: 4,
      isRequired: true,
      choices: [
        "C++",
        "C",
        "Shell",
        "C#",
        "Objective-C",
        "R"
      ]
    }]
  }, {
    title: "What language(s) are you currently using?",
    questions: [{
      type: "checkbox",
      name: "langs3",
      visibleIf: "{opSystem} contains 'Linux'",
      title: "Plese select from the list",
      colCount: 4,
      isRequired: true,
      choices: [
        "VimL",
        "Go",
        "Perl",
        "CoffeeScript",
        "TeX",
        "Swift",
        "Scala",
        "Emacs List",
        "Haskell"
      ]
    }]
  }, {
    title: "What language(s) are you currently using?",
    questions: [{
      type: "checkbox",
      name: "langs4",
      visibleIf: "{opSystem} contains 'Linux'",
      title: "Plese select from the list",
      colCount: 4,
      isRequired: true,
      choices: [
        "Lua",
        "Clojure",
        "Matlab",
        "Arduino",
        "Makefile",
        "Groovy",
        "Puppet",
        "Rust",
        "PowerShell"
      ]
    }]
  }, ]
};

window.survey = new Survey.Model(json);

survey
  .onComplete
  .add(function(result) {
    document
      .querySelector('#surveyResult')
      .innerHTML = "result: " + JSON.stringify(result.data);
  });

survey.showProgressBar = 'bottom';

ReactDOM.render( < Survey.Survey model = {
      survey
    }
    />, document.getElementById("surveyElement"));

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Example of setting the most used properties of the survey, Reactjs Survey Library Example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
        <script src="https://surveyjs.azureedge.net/1.0.59/survey.react.js"></script>
        <link href="https://surveyjs.azureedge.net/1.0.59/survey.css" type="text/css" rel="stylesheet"/>
        <link rel="stylesheet" href="./index.css">

    </head>
    <body>
        <div id="surveyElement"></div>
        <div id="surveyResult"></div>

        <script type="text/babel" src="./index.js"></script>

    </body>
</html>

Specify your

browser: Google Chrome
browser version: v71
surveyjs platform: react v16.6.1
surveyjs version: v1.0.59

Issue Analytics

State:
Created 5 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

b166ercommented, Feb 5, 2019

any news about this feature? here is a example code, that works for me:

Survey.SurveyModel.prototype.getProgress = function () {
	if (this.currentPage == null)
		return 0;
	return Math.ceil(this.currentPage.num * 100 / this.pages.length);
};

0reactions

andrewtelnovcommented, Sep 8, 2020

We have survey.progressBarType property now with options: “pages”, “questions”, “correctQuestions”.

Thank you, Andrew