Question

I’m using jQTouch to build a simple mobile app with an html/js/jquery form that which acts as a product selector. It has 5 dropdown menus, and 6 possible scenarios:

Scenarios: There are 6 products – whichever gets the most points is chosen. The user is then taken to the div (which acts as a page in jQTouch) with the content for that product.

Form:

Question 1

Option 1 : 1 point for Product A, 1.5 points for Product C
Option 2 : 1 point for Product B, 1 point for Product D
Option 3 : 1 point for Product C, 1 point for Product E
Option 4 : 1.5 points for Product F

– And so forth, across 5 questions.

As this is using jQTouch, I was hoping to have the form figure out which product had the most points, and then take the user to the appropriate div (page). Would anyone please have any insight to the best method to accomplish this task?

All help is very much appreciated. 🙂 Thank you.

Answer 1

Figured it out and thought that posting might help someone else 🙂 Working in jQTouch + phonegap.
In HTML:

        <form name="myForm" action="">
        <p>1. Question 1</p>
            <span>
            <select id="rofy-q1" name="q1" class="btn">
                <option value="0" disabled="disabled">Please select</option>
                <option value="50">Option 1</option>
                <option value="100">Option 2</option>
                <option value="200">Option 3</option>
                <option value="300">Option 4</option>
                <option value="400">Option </option>
            </select>
        </span>
        <p>2. Question 2</p>
            <!-- ETC - fill out the remaining questions as per q1 but change the 'name' to q2, q3 etc. -->
        <span class="buttoncontain"><input href="#" type="button" value="Click to see your results" class="btn" onclick="getProduct();"></span>
        </form>

<script type="text/javascript" charset="utf-8">
        function getProduct() {
            // Get scores - a=answer, q=question
            var a1 = document.myForm.q1.value;
            var a2 = document.myForm.q2.value;
            var a3 = document.myForm.q3.value;
            // Calculate the scores
            var userCalc = parseInt(a1) + parseInt(a2) + parseInt(a3);
            // Suggest a product based on scores
            if (userCalc <= 99) {
                // alert("Product 1");
                jQT.goTo("#p1");
            } else if (userCalc <= 199) {
                // alert("Product 2");
                jQT.goTo("#p2");
            } else {
                // alert("Product 3");
                jQT.goTo("#p3");
            }
            // End functions
        }
        </script>