Dental Chart JS
Budget: $250 – $750 USD
We require an interactive SVG dental chart to be created from the following image to be created with HTML, CSS, jquery, javascript, SVG. Max width is 435px.
This chart is to be embedded into an HTML form.
Each tooth has 5 states on click:
1. null - default state
2. missing - tooth is transparent
3. guarded - tooth changes to colour #ff9100
4. poor - tooth changes to colour #fc0606
5. extraction - tooth changes to colour #282827
a few things need to happen when clikcing a tooth.
Onclick:
1. it cycles through states for a user to select
2. it updates a set of hidden values that are connected with that tooth 1 - 32 to store the data when the form is submitted.
The values will look simiar to this:
<input type="hidden" name="dentalChart[0]" value="missing">
<input type="hidden" name="dentalChart[1]" value="">
<input type="hidden" name="dentalChart[2]" value="poor">
<input type="hidden" name="dentalChart[3]" value="guarded">
<input type="hidden" name="dentalChart[4]" value="extraction">
...
<input type="hidden" name="dentalChart[31]" value="missing">
We need an interactive version that will sit in a form, users can input the values of the teeth. We also need to have a non-interactive output, which will show the graphic with the teeth colored from the values the user submitted from the form, (e.g. pass in the array of values from get/post variables of the submitted form and spit out a non-interactive graphic of the results on the page the user is redirected to).
This chart is to be embedded into an HTML form.
Each tooth has 5 states on click:
1. null - default state
2. missing - tooth is transparent
3. guarded - tooth changes to colour #ff9100
4. poor - tooth changes to colour #fc0606
5. extraction - tooth changes to colour #282827
a few things need to happen when clikcing a tooth.
Onclick:
1. it cycles through states for a user to select
2. it updates a set of hidden values that are connected with that tooth 1 - 32 to store the data when the form is submitted.
The values will look simiar to this:
<input type="hidden" name="dentalChart[0]" value="missing">
<input type="hidden" name="dentalChart[1]" value="">
<input type="hidden" name="dentalChart[2]" value="poor">
<input type="hidden" name="dentalChart[3]" value="guarded">
<input type="hidden" name="dentalChart[4]" value="extraction">
...
<input type="hidden" name="dentalChart[31]" value="missing">
We need an interactive version that will sit in a form, users can input the values of the teeth. We also need to have a non-interactive output, which will show the graphic with the teeth colored from the values the user submitted from the form, (e.g. pass in the array of values from get/post variables of the submitted form and spit out a non-interactive graphic of the results on the page the user is redirected to).