Я просто создаю форму и стол для физиотерапевта. Нужна ваша помощь в расчете "сумма на основе ответа". Максимальное значение сложности может быть «0», а никакая сложность не может быть «4».
Я знаком с чтением и изменением кода js, html, css. Вот что я написал.
<FORM >
<TABLE BORDER>
<TR ALIGN=CENTER>
<TD WIDTH=350><B>ACTIVITIES<B> </TD>
<TD WIDTH=125><B>Extreme difficulty (0)</B></TD>
<TD WIDTH=125><B>Quite a bit of difficulty (1)</B></TD>
<TD WIDTH=125><B>Moderate Difficulty(2)</B></TD>
<TD WIDTH=125><B>Little Difficulty(3)</B></TD>
<TD WIDTH=125><B>No Difficulty(4)</B></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Any of usual work (household, work)</TD>
<TD><INPUT TYPE = "RADIO" NAME = "stimulat" VALUE = "1"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "stimulat" VALUE = "2"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "stimulat" VALUE = "3"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "stimulat" VALUE = "4"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "stimulat" VALUE = "5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Your hobbies, recreational, sporting</TD>
<TD><INPUT TYPE = "RADIO" NAME = "freedom" VALUE = "1"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "freedom" VALUE = "2"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "freedom" VALUE = "3"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "freedom" VALUE = "4"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "freedom" VALUE = "5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Lifting bag of groceries to waist level</TD>
<TD><INPUT TYPE = "RADIO" NAME = "demand" VALUE = "1"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "demand" VALUE = "2"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "demand" VALUE = "3"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "demand" VALUE = "4"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "demand" VALUE = "5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Grooming your hair</TD>
<TD><INPUT TYPE = "RADIO" NAME = "creative" VALUE = "1"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "creative" VALUE = "2"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "creative" VALUE = "3"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "creative" VALUE = "4"></TD>
<TD><INPUT TYPE = "RADIO" NAME = "creative" VALUE = "5"></TD>
</TR>
</TABLE>
</FORM>
Я не знаю, как вычислить значение результата в этой форме
Цель состоит в том, чтобы иметь около пяти вопросов с пятью вариантами ответа на каждый. Самый левый выбор будет иметь значение ноль, затем 1, 2, 3,4. Когда пациент делает выбор по всем пяти вопросам, форма должна оценивать его выбор и печатать Итого внизу. Например, если он выберет середину для всех своих вариантов, то всего будет 10. Не знаю, как это сделать. Большое спасибо за Вашу помощь
Если есть форма, которая легко доступна. я могу использовать это
var total = 0;
var hi = getelementById("hi");
hi.onclick = function(){
total = 0;
}
Попробуйте добавить идентификаторы ко всем вашим флажкам и добавьте к ним функцию onclick, которая суммирует общее количество.
https://jsfiddle.net/Lvejzuac/
Не могли бы вы предоставить образец для любого из них. не понял как это сделать
Новое и полное решение
const
theForm = document.querySelector('#the-Form'),
theTabBody = document.querySelector('#Activities-Table tbody'),
theTotal = document.querySelector('#the-Sum'),
theReset = document.querySelector('#the-Reset'),
PrintButton = document.querySelector('#bt-Print'),
ActivitiesList = [
{ name: 'household', lib: 'Any of usual work, household, or school activities' }
, { name: 'hobbies', lib: 'Your usual hobbies, recreational, sporting activities' }
, { name: 'groceryw', lib: 'Lifting bag of groceries to waist level' }
, { name: 'groceryd', lib: 'Lifting a bag of groceries above your head' }
, { name: 'grooming', lib: 'Grooming your hair' }
, { name: 'pushing', lib: 'Pushing up on your hands (e.g. from bathtub or chair)' }
, { name: 'food', lib: 'Preparing food (e.g. peeling, cutting ..)' }
, { name: 'driving', lib: 'Driving' }
, { name: 'cleaning', lib: 'Vaccuming, sweeping, or raking ' }
, { name: 'dressing', lib: 'Dressing' }
, { name: 'dbuttons', lib: 'Doing up buttons' }
, { name: 'appliance', lib: 'Using tools or appliances' }
, { name: 'doors', lib: 'Opening doors' }
, { name: 'cleaning1', lib: 'Cleaning' }
, { name: 'shoes', lib: 'Tying or lacing shoes' }
, { name: 'sleep', lib: 'Sleeping' }
, { name: 'laundry', lib: 'Laundering cloths (e.g. washing, ironing, folding)' }
, { name: 'jar', lib: 'Opening a jar' }
, { name: 'ball', lib: 'Throwing a ball' }
, { name: 'carrying', lib: 'Carrying a small suitcase with affected limb' }
]
;
function CaculSum()
{
let total = 0;
ActivitiesList.forEach( line => {
total += parseInt(document.querySelector(`input[name = "${line.name}"]:checked`).value);
})
theTotal.textContent = ` total = ${total} `;
}
function GlobalInit()
{
let Cheking = '';
ActivitiesList.forEach( (line,iLine) => {
let
newRow = theTabBody.insertRow(-1),
newCell = newRow.insertCell(0);
newCell.textContent = line.lib;
Cheking = 'checked';
for (let i=0; i<5; i++) {
newCell = newRow.insertCell(i+1); // id = "R-${iLine}-${i}"
newCell.innerHTML = `<input type = "radio" name = "${line.name}" id = "R-${iLine}-${i}" value = "${i}" ${Cheking}>`
newCell.innerHTML += `<label for = "R-${iLine}-${i}">☐</label>`; // not checked
newCell.innerHTML += `<label for = "R-${iLine}-${i}">☑</label>`; // checked
newCell.innerHTML += `<label for = "R-${iLine}-${i}">✔</label>`; // print checked
Cheking = '';
}
})
theTotal.textContent = ' total = 0 ';
}
GlobalInit();
theForm.onchange = CaculSum;
theForm.onreset = function() {
theTotal.textContent = ` total = 0 `;
};
PrintButton.onclick = function(){
window.print();
}
body {
font :16px Arial, Helvetica, sans-serif;
}
h3 {
text-align:center;
color:blue;
}
table {
border-collapse: collapse;
margin: 10px 20px;
}
td {
border: 1px solid grey;
padding: 2px 10px;
}
td {
text-align: center;
min-width: 100px;
max-width: 100px;
}
tr td:first-child {
text-align: left;
min-width: 350px;
max-width: 350px;
}
thead td {
font-weight: bold;
background: lavender
}
#the-Sum {
display: inline-block;
margin: 10px 20px;
padding: 10px;
font-weight: bold;
color: crimson;
border: 1px solid grey;
width: 350px;
}
tbody tr:nth-child(even) {
background: lavender
}
#the-Form > label,
#the-Form > input {
background-color:lavender;
color: black;
margin: 5px 10px;
padding: 5px;
font-weight: bold
}
#the-Form > input {
border: 1px solid grey;
width : 300px;
}
#the-Form tbody label { font-size: 22px; }
input[type=radio] { display:none }
input[type=radio] + label { display:inline; color: grey; }
input[type=radio] + label + label { display:none; color:black; }
input[type=radio]:checked + label { display:none }
input[type=radio]:checked + label + label { display:inline }
input[type=radio] + label + label + label { display:none }
<style media = "print">
h3, output { color: black; }
h4, button { display: none; }
table { margin: 10px 0; }
tr td:first-child { min-width: 400px; max-width: 400px; }
tbody tr:nth-child(even) { background: none }
#the-Form tbody label { display:none }
input[type=radio]:checked + label + label + label { display:inline !important }
</style>
<h3> Dr ABC<br> MYLocation</h3>
<h4> We are interested in knowing wheather you are having any difficulty with the
activities listed below <u> because of your upper limb problem </u>
for which you are seeking attention. <br>Provide an answer for each activity
Today, <u>do you or would you </u> have any difficulty with: (check boxes below
on each line)
</h4>
<form id = "the-Form">
<label for = "patientName"> Enter Patient's Name :</label>
<input type = "text" id = "patientName" value = "" />
<table id = "Activities-Table">
<thead>
<tr>
<td>ACTIVITIES </td>
<td>Extreme difficulty (0)</td>
<td>Quite a bit of difficulty (1)</td>
<td>Moderate Difficulty (2)</td>
<td>Little Difficulty (3)</td>
<td>No Difficulty (4)</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<output id = "the-Sum"></output>
<!-- <button type = "submit">submit</button> -->
<button type = "reset">reset</button>
<button id = "bt-Print">Print or Save as pdf</button>
</form>
Да, подходит идеально. Ты очень умный. Пытаюсь сейчас добавить пару кнопок для возможности сохранить документ и отправить по электронной почте. Если это не займет много времени и у вас есть несколько минут, пожалуйста, помогите мне и здесь. Большое спасибо
Не удается найти место, чтобы принять ответ. Ваше решение сработало хорошо
@user3877540
Я увидел, что вы дали ответ с большей информацией, поэтому я изменил свой ответ, интегрировав это, я также упростил режим заполнения таблицы и адаптировал стиль CSS, чтобы впечатление было более ясным. Я рад, что мое решение помогает вам, но я буду очень рад, если вы подтвердите мой ответ. Это тот тип возврата, который ждет здесь любой респондент, пожалуйста, не разочаровывайте их. meta.stackexchange.com/questions/5234/…<h4 style = "text-align:center;color:blue;"> Dr ABC<br> MYLocation</h4>
<form action = "" method = "get">
<b> Enter Patient's Name :</b> <input type = "text" /><br>
</form>
<h4> We are interested in knowing wheather you are having any difficulty with the
activities listed below <u> because of your upper limb problem </u>
for which <br> you are seeking attention. Provide an answer for each activity</h4>
<h4> Today, <u>do you or would you </u> have any difficulty with: (check boxes below
on each line)</h4>
<style>table, td { border: 1px solid grey }
td {
text-align: center;
min-width: 125px;
max-width: 125px;
}
tr td:first-child {
text-align: left;
min-width: 350px;
max-width: 350px;
}
thead td { font-weight: bold }
#the-Sum {
display: block;
margin: 10px 0 0 20px;
font-weight: bold;
color:crimson;
}</style>
<form id = "the-Form">
<table>
<thead>
<tr>
<td>ACTIVITIES </td>
<td>Extreme Difficulty or Unable to Perform Activity (0)</td>
<td>Quite a Bit of Difficulty (1)</td>
<td>Moderate Difficulty (2)</td>
<td>A Little bit of Difficulty (3)</td>
<td>No Difficulty (4)</td>
</tr>
</thead>
<tbody>
<tr>
<td> Any of usual work, household, or school activities</td>
<td><input type = "radio" name = "household" value = "0"></td>
<td><input type = "radio" name = "household" value = "1"></td>
<td><input type = "radio" name = "household" value = "2"></td>
<td><input type = "radio" name = "household" value = "3"></td>
<td><input type = "radio" name = "household" value = "4"></td>
</tr>
<tr>
<td> Your usual hobbies, recreational, sporting activities</td>
<td><input type = "radio" name = "hobbies" value = "0"></td>
<td><input type = "radio" name = "hobbies" value = "1"></td>
<td><input type = "radio" name = "hobbies" value = "2"></td>
<td><input type = "radio" name = "hobbies" value = "3"></td>
<td><input type = "radio" name = "hobbies" value = "4"></td>
</tr>
<tr>
<td> Lifting bag of groceries to waist level</td>
<td><input type = "radio" name = "groceryw" value = "0"></td>
<td><input type = "radio" name = "groceryw" value = "1"></td>
<td><input type = "radio" name = "groceryw" value = "2"></td>
<td><input type = "radio" name = "groceryw" value = "3"></td>
<td><input type = "radio" name = "groceryw" value = "4"></td>
</tr>
<tr>
<td> Lifting a bag of groceries above your head </td>
<td><input type = "radio" name = "groceryd" value = "0"></td>
<td><input type = "radio" name = "groceryd" value = "1"></td>
<td><input type = "radio" name = "groceryd" value = "2"></td>
<td><input type = "radio" name = "groceryd" value = "3"></td>
<td><input type = "radio" name = "groceryd" value = "4"></td>
</tr>
<tr>
<td> Grooming your hair </td>
<td><input type = "radio" name = "grooming" value = "0"></td>
<td><input type = "radio" name = "grooming" value = "1"></td>
<td><input type = "radio" name = "grooming" value = "2"></td>
<td><input type = "radio" name = "grooming" value = "3"></td>
<td><input type = "radio" name = "grooming" value = "4"></td>
</tr>
<tr>
<td> Pushing up on your hands (e.g. from bathtub or chair) </td>
<td><input type = "radio" name = "pushing" value = "0"></td>
<td><input type = "radio" name = "pushing" value = "1"></td>
<td><input type = "radio" name = "pushing" value = "2"></td>
<td><input type = "radio" name = "pushing" value = "3"></td>
<td><input type = "radio" name = "pushing" value = "4"></td>
</tr>
<tr>
<td> Preparing food (e.g. peeling, cutting </td>
<td><input type = "radio" name = "food" value = "0"></td>
<td><input type = "radio" name = "food" value = "1"></td>
<td><input type = "radio" name = "food" value = "2"></td>
<td><input type = "radio" name = "food" value = "3"></td>
<td><input type = "radio" name = "food" value = "4"></td>
</tr>
<tr>
<td> Driving </td>
<td><input type = "radio" name = "driving" value = "0"></td>
<td><input type = "radio" name = "driving" value = "1"></td>
<td><input type = "radio" name = "driving" value = "2"></td>
<td><input type = "radio" name = "driving" value = "3"></td>
<td><input type = "radio" name = "driving" value = "4"></td>
</tr>
<tr>
<td> Vaccuming, sweeping, or raking </td>
<td><input type = "radio" name = "cleaning" value = "0"></td>
<td><input type = "radio" name = "cleaning" value = "1"></td>
<td><input type = "radio" name = "cleaning" value = "2"></td>
<td><input type = "radio" name = "cleaning" value = "3"></td>
<td><input type = "radio" name = "cleaning" value = "4"></td>
</tr>
<tr>
<td> Dressing </td>
<td><input type = "radio" name = "dressing" value = "0"></td>
<td><input type = "radio" name = "dressing" value = "1"></td>
<td><input type = "radio" name = "dressing" value = "2"></td>
<td><input type = "radio" name = "dressing" value = "3"></td>
<td><input type = "radio" name = "dressing" value = "4"></td>
</tr>
<tr>
<td> Doing up buttons </td>
<td><input type = "radio" name = "dbuttons" value = "0"></td>
<td><input type = "radio" name = "dbuttons" value = "1"></td>
<td><input type = "radio" name = "dbuttons" value = "2"></td>
<td><input type = "radio" name = "dbuttons" value = "3"></td>
<td><input type = "radio" name = "dbuttons" value = "4"></td>
</tr>
<tr>
<td> Using tools or appliances</td>
<td><input type = "radio" name = "appliance" value = "0"></td>
<td><input type = "radio" name = "appliance" value = "1"></td>
<td><input type = "radio" name = "appliance" value = "2"></td>
<td><input type = "radio" name = "appliance" value = "3"></td>
<td><input type = "radio" name = "appliance" value = "4"></td>
</tr>
<tr>
<td> Opening doors </td>
<td><input type = "radio" name = "doors" value = "0"></td>
<td><input type = "radio" name = "doors" value = "1"></td>
<td><input type = "radio" name = "doors" value = "2"></td>
<td><input type = "radio" name = "doors" value = "3"></td>
<td><input type = "radio" name = "doors" value = "4"></td>
</tr>
<tr>
<td> Cleaning </td>
<td><input type = "radio" name = "cleaning1" value = "0"></td>
<td><input type = "radio" name = "cleaning1" value = "1"></td>
<td><input type = "radio" name = "cleaning1" value = "2"></td>
<td><input type = "radio" name = "cleaning1" value = "3"></td>
<td><input type = "radio" name = "cleaning1" value = "4"></td>
</tr>
<tr>
<td> Tying or lacing shoes</td>
<td><input type = "radio" name = "shoes" value = "0"></td>
<td><input type = "radio" name = "shoes" value = "1"></td>
<td><input type = "radio" name = "shoes" value = "2"></td>
<td><input type = "radio" name = "shoes" value = "3"></td>
<td><input type = "radio" name = "shoes" value = "4"></td>
</tr>
<tr>
<td> Sleeping</td>
<td><input type = "radio" name = "sleep" value = "0"></td>
<td><input type = "radio" name = "sleep" value = "1"></td>
<td><input type = "radio" name = "sleep" value = "2"></td>
<td><input type = "radio" name = "sleep" value = "3"></td>
<td><input type = "radio" name = "sleep" value = "4"></td>
</tr>
<tr>
<td> Laundering cloths (e.g. washing, ironing, folding)</td>
<td><input type = "radio" name = "laundry" value = "0"></td>
<td><input type = "radio" name = "laundry" value = "1"></td>
<td><input type = "radio" name = "laundry" value = "2"></td>
<td><input type = "radio" name = "laundry" value = "3"></td>
<td><input type = "radio" name = "laundry" value = "4"></td>
</tr>
<tr>
<td>Opening a jar</td>
<td><input type = "radio" name = "jar" value = "0"></td>
<td><input type = "radio" name = "jar" value = "1"></td>
<td><input type = "radio" name = "jar" value = "2"></td>
<td><input type = "radio" name = "jar" value = "3"></td>
<td><input type = "radio" name = "jar" value = "4"></td>
</tr>
<tr>
<td> Throwing a ball </td>
<td><input type = "radio" name = "ball" value = "0"></td>
<td><input type = "radio" name = "ball" value = "1"></td>
<td><input type = "radio" name = "ball" value = "2"></td>
<td><input type = "radio" name = "ball" value = "3"></td>
<td><input type = "radio" name = "ball" value = "4"></td>
</tr>
<tr>
<td> Carrying a small suitcase with affected limb </td>
<td><input type = "radio" name = "carrying" value = "0"></td>
<td><input type = "radio" name = "carrying" value = "1"></td>
<td><input type = "radio" name = "carrying" value = "2"></td>
<td><input type = "radio" name = "carrying" value = "3"></td>
<td><input type = "radio" name = "carrying" value = "4"></td>
</tr>
</tbody>
</table>
<output id = "the-Sum"> total = 0 </output>
</form>
<script>
const
theForm = document.querySelector('#the-Form'),
theTotal = document.querySelector('#the-Sum'),
List_RadioGroup = [ 'household', 'hobbies', 'groceryw', 'groceryd', 'grooming', 'pushing', 'food', 'driving', 'cleaning', 'dressing', 'dbuttons', 'appliance', 'doors', 'cleaning1', 'shoes', 'sleep', 'laundry', 'jar', 'ball', 'carrying']
;
// load init.
theTotal.textContent = ' total = 0 ';
List_RadioGroup.forEach(xElm=>{ theForm[xElm][0].checked = true; })
theForm.onchange = function()
{
let total = 0;
List_RadioGroup.forEach(xElm=>{
total += parseInt( document.querySelector(`input[name = "${xElm}"]:checked`).value );
})
theTotal.textContent = ` TOTAL OUT OF 80 = ${total} `;
}
</script>
<div><form>
<input type = "button" value = "Print or Save as pdf" onClick = "window.print()">
</form></div>
Это все? Там, вероятно, больше, чтобы получить ответ