What is the best way to combine and evaluate user input through javascript?

Question

(I'm very new to this, please bear with me)

I'm making several modules that require user input and I want to somehow combine the input to produce an output. I was thinking of assigning each option a value and adding them together and creating an if/else statement to determine the output...
For example, if the user selects three options with values 1, 2, 3 and the statement says that any combined value greater than 5 will get a result of "Good", then the selected options will get a response of "Good" because when combined, they equal 6 (which is >5).

Does anyone know a better way, and/or can you direct me to some reference sites that might have what I'm looking for?

Thank you so much!! Any help is appreciated!!

Answer 1

Are you looking for something like this?

<form id="module1">
  <input name="option1" type="checkbox" value="Orange"> Orange
  <input name="option2" type="checkbox" value="Banana"> Banana
  <input name="option3" type="checkbox" value="Apple"> Apple
  <input name="option4" type="checkbox" value="Mango"> Mango
  <input name="option5" type="checkbox" value="Pineapple"> Pineapple
</form>
<button id="evaluate" type="button">Evaluate</button>
<h4 id="result"></h4>
<h5 id="values"></h5>

<script type="text/javascript">
    $(document).ready(function () {

        var scoreConstants = {
            'Mango': 100,
            'Banana': 100,
            'Pineapple': 200,
            'Orange': 50,
            'Apple': 250
        };

        var evalScore = function (selectedValues) {
            var totalScore = 0;
            $.each(selectedValues, function (k, v) {
                totalScore += scoreConstants[v];
            });
            return totalScore;
        }

        var getScoreLabel = function (score) {
            var scoreValue = 'Score: ';
            if (score < 200) {
                scoreValue += 'Average';
            } else if (score >= 200 && score < 500) {
                scoreValue += 'Good';
            } else if (score >= 500) {
                scoreValue += 'Excellent!';
            }
            return scoreValue;
        }


        $('body').on('click', '#evaluate', function (e) {
            var $selectedValues = $('#module1').find('input:checked');
            var selectedValues = [];
            $selectedValues.each(function (k, v) {
                var $selected = $(v);
                selectedValues.push($selected.val());
            });

            var score = evalScore(selectedValues);
            var scoreLabel = getScoreLabel(score);

            var valueString = 'Selected: ';
            if (selectedValues.length > 0) {
                $.each(selectedValues, function (k, v) {
                    if (k === (selectedValues.length - 1)) {
                        valueString += v;
                    } else {
                        valueString += v + ', '
                    }
                });
            } else {
                valueString += 'None';
            }

            var $result = $('#result');
            $result.html(scoreLabel);

            var $displayValues = $('#values');
            $displayValues.html(valueString);

        });
    });
</script>

See the code working here: https://jsfiddle.net/0x2L0dek/1