Changeset 548 in tmcsimulator for trunk/webapps/einotebook/scripts/Evaluation.js


Ignore:
Timestamp:
12/25/2019 09:44:50 AM (6 years ago)
Author:
jdalbey
Message:

Evaluation.js restore radio buttons and simplify recordRating(). Add submit button to scrollframe and add collectRatings function to retrieve any rating that have been set.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/webapps/einotebook/scripts/Evaluation.js

    r397 r548  
    66function Evaluation(type, data) 
    77{ 
    8         //========== private static members ==========// 
    9         Evaluation.id = (typeof Evaluation.id == 'undefined') ? 0 : ++Evaluation.id; 
    10          
    11         //========== public constants ==========// 
    12         this.id = Evaluation.id; 
    13         this.ratingGroupName = "evaluationGroup" + this.id;      
    14         this.textID = "evaluationText" + this.id; 
    15         this.type = type; 
    16         this.data = data; 
    17          
    18         //========== public read-only members ==========// 
    19         this.text = ""; 
    20         this.rating = -1; 
    21          
    22         //========== public methods ==========// 
    23         this.html = html; 
    24         this.recordText = recordText;  
    25         this.recordRating = recordRating; 
    26          
    27         //========== private methods ==========// 
    28         this.smallScaleForm = smallScaleForm; 
    29         this.evaluationForm = evaluationForm; 
    30          
    31         //========== function definitions ==========// 
    32         /** 
    33         * @return The html representation of this evaluation. 
    34         */ 
    35         function html() 
    36         { 
    37                 var text = "<table class='evaluation'>" + 
    38                                    "<tr>" + 
    39                                    "<th class='evaluationType' colspan='2'>" + type + " Evaluation</th>" + 
    40                                    "</tr>" + 
    41                                    "<tr>" + 
    42                                    "<td><table class='evaluationInner2'>"; 
    43                  
    44                 for (i = 0; i < this.data.length; i += 2) 
    45                 { 
    46                         text += "<tr>" + 
    47                                    "<td class='evaluationLabel'>" + this.data[i] + "</td>" + 
    48                                    "<td class='evaluationCriteria'>" + this.data[i+1] + "</td>" + 
    49                                    "</tr>"; 
    50                 } 
    51                 /*  Displays the comment input field  
    52                 text += "<tr><td colspan='2' class='evaluationResponse'>" + 
    53                         "<input onchange='events.getEvaluation(" + this.id + ").recordText();'" + 
    54                         " id='" + this.textID + "' type='text' value='" + this.text + "'" + 
    55                         " class='evaluationResponseText' />"  
    56                         + "</td>"; 
     8    //========== private static members ==========// 
     9    Evaluation.id = (typeof Evaluation.id == 'undefined') ? 0 : ++Evaluation.id; 
     10     
     11    //========== public constants ==========// 
     12    this.id = Evaluation.id; 
     13    this.ratingGroupName = "evaluationGroup" + this.id;     
     14    this.textID = "evaluationText" + this.id; 
     15    this.type = type; 
     16    this.data = data; 
     17     
     18    //========== public read-only members ==========// 
     19    this.text = ""; 
     20    this.rating = -1; 
     21     
     22    //========== public methods ==========// 
     23    this.html = html; 
     24    this.recordText = recordText;  
     25    this.recordRating = recordRating; 
     26     
     27    //========== private methods ==========// 
     28    this.smallScaleForm = smallScaleForm; 
     29    this.evaluationForm = evaluationForm; 
     30     
     31    //========== function definitions ==========// 
     32    /** 
     33    * @return The html representation of this evaluation. 
     34    */ 
     35    function html() 
     36    { 
     37        var text = "<table class='evaluation'>" + 
     38                         "<tr>" + 
     39                         "<th class='evaluationType' colspan='2'>" + type + " Evaluation</th>" + 
     40                         "</tr>" + 
     41                         "<tr>" + 
     42                         "<td><table class='evaluationInner2'>"; 
     43         
     44        for (i = 0; i < this.data.length; i += 2) 
     45        { 
     46            text += "<tr>" + 
     47                   "<td class='evaluationLabel'>" + this.data[i] + "</td>" + 
     48                   "<td class='evaluationCriteria'>" + this.data[i+1] + "</td>" + 
     49                   "</tr>"; 
     50        } 
     51        /*  Displays the comment input field  
     52        text += "<tr><td colspan='2' class='evaluationResponse'>" + 
     53            "<input onchange='events.getEvaluation(" + this.id + ").recordText();'" + 
     54            " id='" + this.textID + "' type='text' value='" + this.text + "'" + 
     55            " class='evaluationResponseText' />"  
     56            + "</td>"; 
    5757        */ 
    58         text += "</table>"; 
    59                 /*  Displays the ranking bubbles 
    60                 text += "</td>" + 
    61                                 "<td class='evaluationScale'>" + this.evaluationForm() + "</td>" + 
    62                             "</tr>"; 
    63         */ 
    64         text += "</table>"; 
     58        text +=    "</table>"; 
     59        /*  Displays the ranking bubbles  */ 
     60        text += "</td>" + 
     61                      "<td class='evaluationScale'>" + this.evaluationForm() + "</td>" + 
     62                   "</tr>"; 
     63         
     64        text +=    "</table>"; 
    6565 
    66                          
    67                 return text; 
    68         } 
    69          
    70         /** 
    71          * Stores the rating given by the evaluation scale radio button form. 
    72          */ 
    73         function recordRating()  
    74         {  
    75                 // list of radio buttons 
    76                 var radioButtons; 
    77                  
    78                 // get list of radio buttons 
    79                 radioButtons = events.doc.getElementsByName(this.ratingGroupName); 
    80                  
    81                 // FOR each radio button 
    82                 for (var i = 0; i < radioButtons.length; i++) 
    83                 { 
    84                         // IF the radio button is checked THEN 
    85                         if (radioButtons[i].checked) 
    86                         { 
    87                                 // save rating 
    88                                 this.rating = radioButtons[i].value; 
    89                         } 
    90                 } 
    91         } 
     66                 
     67        return text; 
     68    } 
     69     
     70    /** 
     71     * Stores the rating given by the evaluation scale radio button form. 
     72     */ 
     73    function recordRating(givenRating)  
     74    {  
    9275 
    93         /** 
    94          * Stores the text in the written response text box. 
    95          */ 
    96         function recordText()  
    97         {  
    98                 this.text = events.doc.getElementById(this.textID).value;  
    99         } 
    100          
    101         /** 
    102          * @return The html for appropriate evaluation form for grading. 
    103          */ 
    104         function evaluationForm() 
    105         { 
    106                 return this.smallScaleForm(); 
    107         } 
    108          
    109         /** 
    110          * @return The html for a 1-5 grading scale. 
    111          */ 
    112         function smallScaleForm() 
    113         { 
    114                 return "<form>" + 
    115                            "<table align='right' class='evaluationScale'>" + 
    116                            "<tr>" + 
    117                            "<td class='eventRadioButtonSmallScale'>Best</td>" + 
    118                            "<td class='eventRadioButtonSmallScale'>Good</td>" + 
    119                            "<td class='eventRadioButtonSmallScale'>Average</td>" + 
    120                            "<td class='eventRadioButtonSmallScale'>Poor</td>" + 
    121                            "<td class='eventRadioButtonSmallScale'>Worst</td>" + 
    122                            "</tr>" + 
    123                            "<tr>" + 
    124                            "<td align='center'><input type='radio' " +  
    125                                         (this.rating == 1 ? "checked='true'" : "") +  
    126                                         " onchange='events.getEvaluation(" + this.id +  
    127                                         ").recordRating()' name='" + this.ratingGroupName +  
    128                                         "' value='1'></td>" + 
    129                            "<td align='center'><input type='radio' " +  
    130                                         (this.rating == 2 ? "checked='true'" : "") +  
    131                                         " onchange='events.getEvaluation(" + this.id +  
    132                                         ").recordRating()' name='" + this.ratingGroupName +  
    133                                         "' value='2'></td>" + 
    134                            "<td align='center'><input type='radio' " +  
    135                                         (this.rating == 3 ? "checked='true'" : "") +  
    136                                         " onchange='events.getEvaluation(" + this.id +  
    137                                         ").recordRating()' name='" + this.ratingGroupName +  
    138                                         "' value='3'></td>" + 
    139                            "<td align='center'><input type='radio' " +  
    140                                         (this.rating == 4 ? "checked='true'" : "") +  
    141                                         " onchange='events.getEvaluation(" + this.id +  
    142                                         ").recordRating()' name='" + this.ratingGroupName +  
    143                                         "' value='4'></td>" + 
    144                            "<td align='center'><input type='radio' " +  
    145                                         (this.rating == 5 ? "checked='true'" : "") +  
    146                                         " onchange='events.getEvaluation(" + this.id +  
    147                                         ").recordRating()' name='" + this.ratingGroupName +  
    148                                         "' value='5'></td>" + 
    149                            "</tr>" + 
    150                            "</table>"  + 
    151                            "</form>"; 
    152         } 
     76        this.rating = givenRating; 
     77 
     78        console.log(this.ratingGroupName + " recordRating of " + this.rating ) 
     79    } 
     80 
     81    /** 
     82     * Stores the text in the written response text box. 
     83     */ 
     84    function recordText()  
     85    {  
     86        this.text = events.doc.getElementById(this.textID).value;  
     87    } 
     88     
     89    /** 
     90     * @return The html for appropriate evaluation form for grading. 
     91     */ 
     92    function evaluationForm() 
     93    { 
     94        return this.smallScaleForm(); 
     95    } 
     96     
     97    /** 
     98     * @return The html for a 1-5 grading scale. 
     99     */ 
     100    function smallScaleForm() 
     101    { 
     102        return "<form>" + 
     103               "<table align='right' class='evaluationScale'>" + 
     104               "<tr>" + 
     105               "<td class='eventRadioButtonSmallScale'>Best</td>" + 
     106               "<td class='eventRadioButtonSmallScale'>Good</td>" + 
     107               "<td class='eventRadioButtonSmallScale'>Average</td>" + 
     108               "<td class='eventRadioButtonSmallScale'>Poor</td>" + 
     109               "<td class='eventRadioButtonSmallScale'>Worst</td>" + 
     110               "</tr>" + 
     111               "<tr>" + 
     112               "<td align='center'><input type='radio' " +  
     113                       (this.rating == 5 ? "checked='true'" : "") +  
     114                       " onchange='events.getEvaluation(" + this.id +  
     115                       ").recordRating(5)' name='" + this.ratingGroupName +  
     116                       "' value='1'></td>" + 
     117               "<td align='center'><input type='radio' " +  
     118                       (this.rating == 4 ? "checked='true'" : "") +  
     119                       " onchange='events.getEvaluation(" + this.id +  
     120                       ").recordRating(4)' name='" + this.ratingGroupName +  
     121                       "' value='2'></td>" + 
     122               "<td align='center'><input type='radio' " +  
     123                       (this.rating == 3 ? "checked='true'" : "") +  
     124                       " onchange='events.getEvaluation(" + this.id +  
     125                       ").recordRating(3)' name='" + this.ratingGroupName +  
     126                       "' value='3'></td>" + 
     127               "<td align='center'><input type='radio' " +  
     128                       (this.rating == 2 ? "checked='true'" : "") +  
     129                       " onchange='events.getEvaluation(" + this.id +  
     130                       ").recordRating(2)' name='" + this.ratingGroupName +  
     131                       "' value='4'></td>" + 
     132               "<td align='center'><input type='radio' " +  
     133                       (this.rating == 1 ? "checked='true'" : "") +  
     134                       " onchange='events.getEvaluation(" + this.id +  
     135                       ").recordRating(1)' name='" + this.ratingGroupName +  
     136                       "' value='5'></td>" + 
     137               "</tr>" + 
     138               "</table>"  + 
     139               "</form>"; 
     140    } 
    153141} 
Note: See TracChangeset for help on using the changeset viewer.