JS / Jquerry product Quiz
Budget: €30 – €250 EUR
Hello I am looking for a vanilla JS or jQuery developer for a project.
It's about a perfume selector in the form of a quiz. The quiz is on one page and no content should be reloaded via ajax.
Questions lead to a suggestion of suitable Parfumes. One or more answers are possible. Navigation is via next and previous buttons or when the maximum number of answers is reached.
The first question is e.g. choose your gender with the selection man, woman, diverse
The HTML container receives the data attributes
data-question:1(Question #1)
data-answer_length: 1 (selection of possible answers)
The answer elements receive the data attributes
data_gender:1
data_gender:2
data_gender:3
Another example
The HTML container receives the data attributes
data-question:3(Question 3)
data-answer_length: 3 (selection of the maximum possible answers = three)
The response elements receive the data attributes
data_fragrance_type:1
data_fragrance_type:2
data_fragrance_type:3
data_fragrance_type:4
data_fragrance_type:5
The current question container always gets the class active
As soon as data-answer_length is reached or by clicking on next, the next question will be displayd.
If data-answer_length is greater than 1, the answer is an array.
The answer element gets a class active when selected. If it is clicked again, the active class is removed and the value is deleted.
The evaluation:
The weightings are configured in the script, e.g.:
factor_gender:10
factor_mood:5
factor_fragrance_type:3
factor_intens:5
Each perfume has data attributes matching the questions plus a sales factor
Example product 1:
data_res_gender:1
data_res_mood:1
data_res_fragrance_type:1,3,5
data_res_intens:1
data_res_salesfactor:1.5
Each answer match is now weighted by the configuration and multiplied by the salesfactor.
For this product the score is:
if following was selected: gender 1; mood 2; fragrance_type: 1,2,5 ; intens:2
(10 + 0 + 3 + 3 + 0) x 1.5 = 24
For this product the maximum score is:
(10 + 5 + 3 + 3 + 3 + 5) x 1.5 = 43.5
The product's container is given the inline style order: with a negative sign rounded to an integer. In the example with maximum points -45.
The result should be saved as a cookie, and a way to reset the quiz.
Animation will be performed by us an CSS.
We are looking forward to your application.
It's about a perfume selector in the form of a quiz. The quiz is on one page and no content should be reloaded via ajax.
Questions lead to a suggestion of suitable Parfumes. One or more answers are possible. Navigation is via next and previous buttons or when the maximum number of answers is reached.
The first question is e.g. choose your gender with the selection man, woman, diverse
The HTML container receives the data attributes
data-question:1(Question #1)
data-answer_length: 1 (selection of possible answers)
The answer elements receive the data attributes
data_gender:1
data_gender:2
data_gender:3
Another example
The HTML container receives the data attributes
data-question:3(Question 3)
data-answer_length: 3 (selection of the maximum possible answers = three)
The response elements receive the data attributes
data_fragrance_type:1
data_fragrance_type:2
data_fragrance_type:3
data_fragrance_type:4
data_fragrance_type:5
The current question container always gets the class active
As soon as data-answer_length is reached or by clicking on next, the next question will be displayd.
If data-answer_length is greater than 1, the answer is an array.
The answer element gets a class active when selected. If it is clicked again, the active class is removed and the value is deleted.
The evaluation:
The weightings are configured in the script, e.g.:
factor_gender:10
factor_mood:5
factor_fragrance_type:3
factor_intens:5
Each perfume has data attributes matching the questions plus a sales factor
Example product 1:
data_res_gender:1
data_res_mood:1
data_res_fragrance_type:1,3,5
data_res_intens:1
data_res_salesfactor:1.5
Each answer match is now weighted by the configuration and multiplied by the salesfactor.
For this product the score is:
if following was selected: gender 1; mood 2; fragrance_type: 1,2,5 ; intens:2
(10 + 0 + 3 + 3 + 0) x 1.5 = 24
For this product the maximum score is:
(10 + 5 + 3 + 3 + 3 + 5) x 1.5 = 43.5
The product's container is given the inline style order: with a negative sign rounded to an integer. In the example with maximum points -45.
The result should be saved as a cookie, and a way to reset the quiz.
Animation will be performed by us an CSS.
We are looking forward to your application.