From 77e92b7297bf5a15fa99261ac41bb9f33d0a2f81 Mon Sep 17 00:00:00 2001
From: BOHUNG <naruto0426@rulingcom.com>
Date: Sat, 28 Dec 2019 17:57:13 +0800
Subject: [PATCH] finish everything before 2019/12/26

---
 app/assets/javascripts/cancer_predict.js      | 163 ++++++++++++++++--
 app/assets/stylesheets/cancer_predict.scss    |  28 ++-
 app/controllers/cancerpredicts_controller.rb  |  98 ++++++++---
 app/models/cancerpredictfields.rb             |  13 +-
 app/views/admin/cancerpredicts/index.html.erb |  19 +-
 5 files changed, 263 insertions(+), 58 deletions(-)

diff --git a/app/assets/javascripts/cancer_predict.js b/app/assets/javascripts/cancer_predict.js
index 0d45038..25fb741 100644
--- a/app/assets/javascripts/cancer_predict.js
+++ b/app/assets/javascripts/cancer_predict.js
@@ -4,7 +4,6 @@ $(document).ready(function(){
 		$('.header-nav').html(head_images.responseJSON['head_images']);
 		$('.navbar-brand').html(head_images.responseJSON['title'])
 	});
-	$('#font_size_choices .cancer_table_btn').eq(0).addClass('active');
 	Array.prototype.remove_item_from_array = function(){
 		var result_array = this;
 		for(var i=0;i<arguments.length;i++){
@@ -30,7 +29,47 @@ $(document).ready(function(){
 		result_array.remove_item_from_array = this.remove_item_from_array;
 		return result_array;
 	};
-	$('.cancer_help_btn').append('<i aria-hidden="true" class="fa fa-question"></i>');
+	$('input#lymph_nodes_examined').data('range_new' , $('input#lymph_nodes_examined').data('range'));
+	$('input#lymph_nodes_positive').data('range_new' , $('input#lymph_nodes_positive').data('range'));
+	$('.num_only').on('input', function() {
+		$(this).siblings('.num_only_value').val($(this).val());
+		if( Number($(this).val()) < $(this).data('range')[0] || $(this).val() == "" || (Number($(this).val()) > $(this).data('range')[1] && $(this).data('range')[1] != undefined) ){
+			$(this).css('color','#f24a69');
+			$(this).addClass('cancertable_empty');
+		}else{
+			$(this).css('color','#333');
+			$(this).removeClass('cancertable_empty');
+			if($('.cancertable_empty').length == 0){
+				$('#danger_texts').remove();
+			};
+		};
+	});
+	$('input#lymph_nodes_positive').off('input').on('input',function(){
+		$(this).siblings('.num_only_value').val($(this).val());
+		if( Number($(this).val()) < $(this).data('range_new')[0] || $(this).val() == "" || (Number($(this).val()) > $(this).data('range_new')[1] && $(this).data('range_new')[1] != undefined) ){
+			$(this).css('color','#f24a69');
+			$(this).addClass('cancertable_empty');
+		}else{
+			$(this).css('color','#333');
+			$(this).removeClass('cancertable_empty');
+			if($('.cancertable_empty').length == 0){
+				$('#danger_texts').remove();
+			};
+		};
+	});
+	$('input#lymph_nodes_examined').off('input').on('input',function(){
+		$(this).siblings('.num_only_value').val($(this).val());
+		if( Number($(this).val()) < $(this).data('range_new')[0] || $(this).val() == "" || (Number($(this).val()) > $(this).data('range_new')[1] && $(this).data('range_new')[1] != undefined) ){
+			$(this).css('color','#f24a69');
+			$(this).addClass('cancertable_empty');
+		}else{
+			$(this).css('color','#333');
+			$(this).removeClass('cancertable_empty');
+			if($('.cancertable_empty').length == 0){
+				$('#danger_texts').remove();
+			};
+		};
+	});
 	$('.cancer_help_btn').off("click").on('click',function(){
 		var modal_head = "";
 		try{ modal_head = $(this).parent().find(">label").html()}catch{};
@@ -166,9 +205,11 @@ $(document).ready(function(){
 		$('.cancer_table_btn').removeClass('active');
 		$('.cancer-btn-group input').attr('value',0);
 		$('.num_only').val('');
+		$('.num_only_value').val('');
 		$('#cancer_table .cancer_form_field').removeClass('cancertable_empty');
 		$('#cancer_predict_result_block').css('display','none');
 		$('#danger_texts').remove();
+		$('select.select_num').val('');
 	});
 	function get_input_data(){
 		var flag;
@@ -189,7 +230,11 @@ $(document).ready(function(){
 					$('#cancer_table .cancer_form_field').eq(i).removeClass('cancertable_empty');
 				}
 			};
-		}
+		};
+		if( Number($('input#lymph_nodes_examined').siblings('.num_only_value').val()) < Number($('input#lymph_nodes_positive').siblings('.num_only_value').val())){
+			$('input#lymph_nodes_positive').addClass('cancertable_empty');
+			$('input#lymph_nodes_positive').css('color','rgb(242, 74, 105)');
+		};
 		if($('.cancertable_empty').length != 0){
 			flag = 0;
 			($('#danger_texts').length == 0) ? $('#cancer_table_submit').parent().before('<a id="danger_texts" style="color:red;">請注意紅框的輸入資料是否符合要求</a>') : null;
@@ -202,12 +247,19 @@ $(document).ready(function(){
 			for(var i = 0;i < $('#cancer_table .cancer_form_field').length;i++){
 				var name = $('#cancer_table .cancer_form_field').eq(i).attr('id')
 				if($('#cancer_table .cancer_form_field').eq(i).hasClass('num_only'))
-					post_json[name] = $('#cancer_table .cancer_form_field').eq(i).val();
+					post_json[name] = $('#cancer_table .cancer_form_field').eq(i).siblings('.num_only_value').val();
 				else{
 					var index = ($('#cancer_table .cancer_form_field').eq(i).find('[value="1"]').index()+1)/2;
 					post_json[name] = index;
 				};
 			};
+			if( (post_json["ER_status"] == 2 && post_json["PR_status"] == 2) || (post_json["HER2_status"] != 1)){
+				$('#hormone_therapy .cancer_table_btn').attr('disabled','disabled');
+				$('[for="hormone_therapy"]').css('color','rgb(204, 204, 204)');
+			}else{
+				$('#hormone_therapy .cancer_table_btn').removeAttr('disabled');
+				$('[for="hormone_therapy"]').css('color','');
+			}
 			return post_json;
 		}else{
 			return null;
@@ -606,18 +658,6 @@ $(document).ready(function(){
 	$('.float_num').off('keyup').on('keyup',function(){
 		this.value = this.value.replace(/[^\d.]/g,'');
 	});
-	$('.num_only').on('input', function() {
-		if( Number($(this).val()) < $(this).data('range')[0] || $(this).val() == "" || (Number($(this).val()) > $(this).data('range')[1] && $(this).data('range')[1] != undefined) ){
-			$(this).css('color','#f24a69');
-			$(this).addClass('cancertable_empty');
-		}else{
-			$(this).css('color','#333');
-			$(this).removeClass('cancertable_empty');
-			if($('.cancertable_empty').length == 0){
-				$('#danger_texts').remove();
-			};
-		};
-	});
 	$('.num_only').blur(function() {
 		if( Number($(this).val()) < $(this).data('range')[0] || $(this).val() == "" || (Number($(this).val()) > $(this).data('range')[1] && $(this).data('range')[1] != undefined) ){
 			$(this).css('color','#f24a69');
@@ -634,13 +674,98 @@ $(document).ready(function(){
 		$(this).change();
 	});
 	$('select.select_num').change(function(){
-		$(this).parent('form').find('>input.num_only').val($(this).val());
-		$(this).parent().find('>input.num_only').css('color','#333');
-		$(this).parent().find('>input.num_only').removeClass('cancertable_empty');
+		if(this.selectedIndex != 0){
+			$(this).siblings('input.num_only').val($(this).find('option').eq(this.selectedIndex).text());
+			$(this).siblings('input.num_only').removeClass('cancertable_empty');
+			$(this).siblings('input.num_only').css('color','#333');
+		}else{
+			$(this).siblings('input.num_only').addClass('cancertable_empty');
+			$(this).siblings('input.num_only').css('color','rgb(242, 74, 105)');
+			$(this).siblings('input.num_only').val($(this).val());
+		}
+		$(this).siblings('input.num_only_value').val($(this).val());
 		if($('.cancertable_empty').length == 0){
 			$('#danger_texts').remove();
 		};
 	});
+	$('input#lymph_nodes_examined').siblings('select.select_num').off('change').on('change',function(){
+		var range = $('input#lymph_nodes_positive').data('range');
+		range[1] = Number($(this).val());
+		$('input#lymph_nodes_positive').data('range_new', range);
+		if(this.selectedIndex != 0){
+			$(this).siblings('input.num_only').val($(this).find('option').eq(this.selectedIndex).text());
+			$(this).siblings('input.num_only').removeClass('cancertable_empty');
+			$(this).siblings('input.num_only').css('color','#333');
+		}else{
+			$(this).siblings('input.num_only').addClass('cancertable_empty');
+			$(this).siblings('input.num_only').css('color','rgb(242, 74, 105)');
+			$(this).siblings('input.num_only').val($(this).val());
+		}
+		$(this).siblings('input.num_only_value').val($(this).val());
+		if($('.cancertable_empty').length == 0){
+			$('#danger_texts').remove();
+		};
+		$(this).siblings('.num_only_value').val($(this).val());
+		if( Number($('input#lymph_nodes_positive').siblings('.num_only_value').val()) <= Number($(this).val()) ){
+			$('input#lymph_nodes_positive').css('color','#333');
+			$('input#lymph_nodes_positive').removeClass('cancertable_empty');
+		};
+		if( Number($(this).val()) < $(this).siblings('.num_only').data('range_new')[0] || $(this).val() == "" || (Number($(this).val()) > $(this).siblings('.num_only').data('range_new')[1] && $(this).siblings('.num_only').data('range_new')[1] != undefined) ){
+			$(this).siblings('.num_only').css('color','#f24a69');
+			$(this).siblings('.num_only').addClass('cancertable_empty');
+		}else{
+			$(this).siblings('.num_only').css('color','#333');
+			$(this).siblings('.num_only').removeClass('cancertable_empty');
+			if($('.cancertable_empty').length == 0){
+				$('#danger_texts').remove();
+			};
+		};
+	});
+	$('input#lymph_nodes_positive').siblings('select.select_num').off('change').on('change',function(){
+		var range = $('input#lymph_nodes_examined').data('range');
+		range[0] = Number($(this).val());
+		$('input#lymph_nodes_examined').data('range_new', range);
+		if(this.selectedIndex != 0){
+			$(this).siblings('input.num_only').val($(this).find('option').eq(this.selectedIndex).text());
+			$(this).siblings('input.num_only').removeClass('cancertable_empty');
+			$(this).siblings('input.num_only').css('color','#333');
+		}else{
+			$(this).siblings('input.num_only').addClass('cancertable_empty');
+			$(this).siblings('input.num_only').css('color','rgb(242, 74, 105)');
+			$(this).siblings('input.num_only').val($(this).val());
+		}
+		$(this).siblings('input.num_only_value').val($(this).val());
+		if($('.cancertable_empty').length == 0){
+			$('#danger_texts').remove();
+		};
+		$(this).siblings('.num_only_value').val($(this).val());
+		if( Number($('input#lymph_nodes_examined').siblings('.num_only_value').val()) >= Number($(this).val()) ){
+			$('input#lymph_nodes_examined').css('color','#333');
+			$('input#lymph_nodes_examined').removeClass('cancertable_empty');
+		};
+		if( Number($(this).val()) < $(this).siblings('.num_only').data('range_new')[0] || $(this).val() == "" || (Number($(this).val()) > $(this).siblings('.num_only').data('range_new')[1] && $(this).siblings('.num_only').data('range_new')[1] != undefined) ){
+			$(this).siblings('.num_only').css('color','#f24a69');
+			$(this).siblings('.num_only').addClass('cancertable_empty');
+		}else{
+			$(this).siblings('.num_only').css('color','#333');
+			$(this).siblings('.num_only').removeClass('cancertable_empty');
+			if($('.cancertable_empty').length == 0){
+				$('#danger_texts').remove();
+			};
+		};
+	});
+	$('select.select_num').blur(function() {
+		if( Number($(this).siblings('.num_only_value').val()) < $(this).siblings('.num_only').data('range')[0] || $(this).siblings('.num_only_value').val() == "" || (Number($(this).siblings('.num_only_value').val()) > $(this).siblings('.num_only').data('range')[1] && $(this).siblings('.num_only').data('range')[1] != undefined) ){
+			$(this).siblings('.num_only').css('color','#f24a69');
+			$(this).siblings('.num_only').addClass('cancertable_empty');
+		}else{
+			$(this).siblings('.num_only').css('color','#333');
+			$(this).siblings('.num_only').removeClass('cancertable_empty');
+			if($('.cancertable_empty').length == 0){
+				$('#danger_texts').remove();
+			};
+		};
+	});
 	if($(window).width() < 768)
 		$('#cancer_predict_result').attr('style','');
 });
diff --git a/app/assets/stylesheets/cancer_predict.scss b/app/assets/stylesheets/cancer_predict.scss
index e7e8321..2fa4634 100644
--- a/app/assets/stylesheets/cancer_predict.scss
+++ b/app/assets/stylesheets/cancer_predict.scss
@@ -1,5 +1,6 @@
 #cancer_table *[data-key]{
 	padding: 0.375em 0;
+	display: inline-block;
 }
 .head_logo{
 	height: 4em;
@@ -9,6 +10,12 @@
 		width: 100%;
 	}
 }
+div.num_group{
+	position: relative;
+	float: left;
+	width: 4.125em;
+	height: 2.25em;
+}
 .navbar-brand>img.head_logo{
 	width: 70%;
     height: auto;
@@ -25,16 +32,19 @@
 	vertical-align: middle;
 	color:#5d7ca2;
 }
-@media screen and (min-width: 48em){
-	.cencer_table_name{
+@media screen and (min-width: 71.125em){
+	#cancer_table .cencer_table_name{
 		width: 16.25em;
 	}
 }
-@media screen and (max-width: 47.875em){
-	.cencer_table_name{
+@media screen and (max-width: 71em){
+	#cancer_table .cencer_table_name{
 		width: 12.25em;
 	}
 }
+#cancer_predict_result_block .cencer_table_name{
+	width: 4em;
+}
 .cancer_table_btn{
 	margin-right: 0.5em;
 	color:#5d7ca2;
@@ -71,17 +81,17 @@ form.for_num{
 }
 select.select_num{
 	position: absolute;
-	width:4.125em;
-	height:1.75em;
-	left:1em;
-	clip: rect(0.25em,3.8em,1.5em,2.875em);
+	width: 5.125em;
+	height: 1.75em;
+	left: 1em;
+	clip: rect(0.25em,4.8em,1.5em,3.875em);
 	border:none;
 	padding: 0.5em;
 }
 input.num_only{
 	color: black;
 	border-top: 0.125em solid rgb(221, 221, 221);
-	width: 4.125em;
+	width: 5.125em;
 	padding: 0em 0em 0.25em;
 	border-left: 0.125em solid rgb(221, 221, 221);
 	text-align: center;
diff --git a/app/controllers/cancerpredicts_controller.rb b/app/controllers/cancerpredicts_controller.rb
index 85e361d..29b7db7 100644
--- a/app/controllers/cancerpredicts_controller.rb
+++ b/app/controllers/cancerpredicts_controller.rb
@@ -190,11 +190,15 @@ class CancerpredictsController < ApplicationController
 	tags = OrbitHelper.widget_tags
 	categories = OrbitHelper.widget_categories || []
 	create_first_field
-	@table_str = '<div id="cancer_table"><div id="show_help_modal" class="modal fade"></div>'
+	@size = {}
+	@size_name = ['small','medium','large']
+	@size_name.each{|name| @size[name] = @form_to_show[name]['font_size']}
+	@size_active_size = ''
+	@size.each{|size_key,size_value| (@form_to_show[size_key]['active'].to_i == 1) ? ( @size_active_size =  size_value ): nil }
+	@table_str = '<div id="cancer_table" style="font-size:' + @size_active_size + ';"><div id="show_help_modal" class="modal fade"></div>'
 	@table_str += '<div id="cancer_table_top"><div id="text_descibe">'+@form_to_show.text_descibe[I18n.locale.to_s] +'</div>'
-	@size = {'small'=>@form_to_show.small,'medium'=>@form_to_show.medium,'large'=>@form_to_show.large}
 	@table_str += '<div id="font_size_choices">'+'<label id="font_texts">'+t('cancerpredict.font_size')+':</label>'
-	@size.each{|size_key,size_value| @table_str += ('<button class="cancer_table_btn  btn btn-default btn-sm" onclick="document.getElementById(\'cancer_table\').style[\'font-size\']=\''+size_value+'\';document.getElementById(\'cancer_predict_result_block\').style[\'font-size\']=\''+size_value+'\';">'+t('cancerpredict.'+size_key)+'</button>' )}
+	@size.each{|size_key,size_value| @table_str += ('<button class="cancer_table_btn  '+((@form_to_show[size_key]['active'].to_i == 1) ? 'active' :'') + ' btn btn-default btn-sm" onclick="document.getElementById(\'cancer_table\').style[\'font-size\']=\''+size_value+'\';document.getElementById(\'cancer_predict_result_block\').style[\'font-size\']=\''+size_value+'\';">'+t('cancerpredict.'+size_key)+'</button>' )}
 	@table_str += '</div></div><div style="clear:both;"></div>'
 	@table_str_left = '<div id="cancer_table_left">'
 	@table_str_right = '<div id="cancer_table_right">'
@@ -216,23 +220,41 @@ class CancerpredictsController < ApplicationController
 			@table_str_left += @field_property["name"]
 			@table_str_left += '</label>'
 			if @field_property["comment_text"] != ""
-				@table_str_left += '<button tabindex="0" class="cancer_help_btn" data-target="#show_help_modal" style="float:left;cursor: pointer;padding: 0em 0.475em;font-size: 1.25em;border-radius: 15px;background-color: rgb(210, 106, 2);border-color: rgb(210, 106, 2);color: white;"></button>'
+				@table_str_left += '<button tabindex="0" class="cancer_help_btn" data-target="#show_help_modal" style="float:left;cursor: pointer;padding: 0em 0.475em;font-size: 1.25em;border-radius: 15px;background-color: rgb(210, 106, 2);border-color: rgb(210, 106, 2);color: white;"><i aria-hidden="true" class="fa fa-question"></i></button>'
 				@table_str_left += '<input class="help_texts" type="hidden" value="'+@field_property["comment_text"]+'" name='+@field_property["variable"]+'/>'
 			else
-				@table_str_left += '<div style="margin-right: 2.125em;"></div>'
+				@site_locales = current_site.in_use_locales
+				@site_locales.delete(I18n.locale)
+				@site_locales.each do |locale|
+					next if property["comment_text"][locale.to_s] == ""
+					@field_property["comment_text"] = property["comment_text"][locale.to_s]
+					break
+				end
+				if @field_property["comment_text"] != ""
+					@table_str_left += '<button tabindex="0" class="cancer_help_btn" data-target="#show_help_modal" style="float:left;cursor: pointer;padding: 0em 0.475em;font-size: 1.25em;border-radius: 15px;background-color: rgb(210, 106, 2);border-color: rgb(210, 106, 2);color: white;"><i aria-hidden="true" class="fa fa-question"></i></button>'
+					@table_str_left += '<input class="help_texts" type="hidden" value="'+@field_property["comment_text"]+'" name='+@field_property["variable"]+'/>'
+				else
+					@table_str_left += '<div style="margin-right: 2.125em;float: left;"></div>'
+				end
 			end
 			if @field_property["is_num"] == 1
 				if @field_property["is_float"] == 1
-					@table_str_left += '<input class="num_only float_num cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'"/>'
+					@table_str_left += '<div class="num_group"><input class="num_only float_num cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'"/></div>'
 				else
-					@table_str_left += '<form class="for_num">'
+					@table_str_left += '<div class="num_group"><form class="for_num">'
 					@table_str_left += '<input class="num_only cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'" onkeyup="value=value.replace(/[^\d]/g,\'\') "onbeforepaste="clipboardData.setData(\'text\',clipboardData.getData(\'text\').replace(/[^\d]/g,\'\'))"/>'
+					@table_str_left += '<input class="num_only_value" type="hidden" value="0"/>'
 					@please_choice = (I18n.locale.to_s == "zh_tw") ? "請選擇" : "Please choice"
 					@table_str_left += '<select class="select_num"><option value="">'+@please_choice+'</option>'
+					if @field_property["choice_fields"] != []
+						@field_property["choice_fields"].each do |choice|
+							@table_str_left += ('<option value="0">' + choice.to_s + '</option>')
+						end
+					end
 					for @num in @field_property["range"][0] .. @field_property["range"][1]
 						@table_str_left += ('<option value="' + @num.to_s + '">' + @num.to_s + '</option>')
 					end
-					@table_str_left += '</select></form>'
+					@table_str_left += '</select></form></div>'
 				end
 			else
 				@table_str_left += '<div class= "cancer-btn-group cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;">'
@@ -253,23 +275,41 @@ class CancerpredictsController < ApplicationController
 			@table_str_right += @field_property["name"]
 			@table_str_right += '</label>'
 			if @field_property["comment_text"] != ""
-				@table_str_right += '<button tabindex="0" class="cancer_help_btn" data-target="#show_help_modal" style="float:left;cursor: pointer;padding: 0em 0.475em;font-size: 1.25em;border-radius: 15px;background-color: rgb(210, 106, 2);border-color: rgb(210, 106, 2);color: white;"></button>'
+				@table_str_right += '<button tabindex="0" class="cancer_help_btn" data-target="#show_help_modal" style="float:left;cursor: pointer;padding: 0em 0.475em;font-size: 1.25em;border-radius: 15px;background-color: rgb(210, 106, 2);border-color: rgb(210, 106, 2);color: white;"><i aria-hidden="true" class="fa fa-question"></i></button>'
 				@table_str_right += '<input class="help_texts" type="hidden" value="'+@field_property["comment_text"]+'" name='+@field_property["variable"]+'/>'
 			else
-				@table_str_right += '<div style="margin-right: 2.125em;"></div>'
+				@site_locales = current_site.in_use_locales
+				@site_locales.delete(I18n.locale)
+				@site_locales.each do |locale|
+					next if property["comment_text"][locale.to_s] == ""
+					@field_property["comment_text"] = property["comment_text"][locale.to_s]
+					break
+				end
+				if @field_property["comment_text"] != ""
+					@table_str_right += '<button tabindex="0" class="cancer_help_btn" data-target="#show_help_modal" style="float:left;cursor: pointer;padding: 0em 0.475em;font-size: 1.25em;border-radius: 15px;background-color: rgb(210, 106, 2);border-color: rgb(210, 106, 2);color: white;"><i aria-hidden="true" class="fa fa-question"></i></button>'
+					@table_str_right += '<input class="help_texts" type="hidden" value="'+@field_property["comment_text"]+'" name='+@field_property["variable"]+'/>'
+				else
+					@table_str_right += '<div style="margin-right: 2.125em;float: left;"></div>'
+				end
 			end
 			if @field_property["is_num"] == 1
 				if @field_property["is_float"] == 1
-					@table_str_right += '<input class="num_only float_num cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'"/><button class="btn-sub"></button><button class="btn-add"></button>'
+					@table_str_right += '<div class="num_group"><input class="num_only float_num cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'"/><button class="btn-sub"></button><button class="btn-add"></button></div>'
 				else
-					@table_str_right += '<form class="for_num">'
+					@table_str_right += '<div class="num_group"><form class="for_num">'
 					@table_str_right += '<input class="num_only cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'" onkeyup="value=value.replace(/[^\d]/g,\'\') "onbeforepaste="clipboardData.setData(\'text\',clipboardData.getData(\'text\').replace(/[^\d]/g,\'\'))"/>'
+					@table_str_right += '<input class="num_only_value" type="hidden" value="0"/>'
 					@please_choice = (I18n.locale.to_s == "zh_tw") ? "請選擇" : "Please choice"
 					@table_str_right += '<select class="select_num"><option value="">'+@please_choice+'</option>'
+					if @field_property["choice_fields"] != []
+						@field_property["choice_fields"].each do |choice|
+							@table_str_right += ('<option value="0">' + choice.to_s + '</option>')
+						end
+					end
 					for @num in @field_property["range"][0] .. @field_property["range"][1]
 						@table_str_right += ('<option value="' + @num.to_s + '">' + @num.to_s + '</option>')
 					end
-					@table_str_right += '</select></form>'
+					@table_str_right += '</select></form></div>'
 				end
 			else
 				@table_str_right += '<div class= "cancer-btn-group cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;">'
@@ -321,23 +361,41 @@ class CancerpredictsController < ApplicationController
 		@table_result_choice_fileds += @field_property["name"]
 		@table_result_choice_fileds += '</label>'
 		if @field_property["comment_text"] != ""
-			@table_result_choice_fileds += '<button tabindex="0" class="cancer_help_btn" data-target="#show_help_modal" style="float:left;cursor: pointer;padding: 0em 0.475em;font-size: 1.25em;border-radius: 15px;background-color: rgb(210, 106, 2);border-color: rgb(210, 106, 2);color: white;"></button>'
+			@table_result_choice_fileds += '<button tabindex="0" class="cancer_help_btn" data-target="#show_help_modal" style="float:left;cursor: pointer;padding: 0em 0.475em;font-size: 1.25em;border-radius: 15px;background-color: rgb(210, 106, 2);border-color: rgb(210, 106, 2);color: white;"><i aria-hidden="true" class="fa fa-question"></i></button>'
 			@table_result_choice_fileds += '<input class="help_texts" type="hidden" value="'+@field_property["comment_text"]+'" name='+@field_property["variable"]+'></input>'
 		else
-			@table_result_choice_fileds += '<div style="margin-right: 2.125em;"></div>'
+			@site_locales = current_site.in_use_locales
+			@site_locales.delete(I18n.locale)
+			@site_locales.each do |locale|
+				next if property["comment_text"][locale.to_s] == ""
+				@field_property["comment_text"] = property["comment_text"][locale.to_s]
+				break
+			end
+			if @field_property["comment_text"] != ""
+				@table_result_choice_fileds += '<button tabindex="0" class="cancer_help_btn" data-target="#show_help_modal" style="float:left;cursor: pointer;padding: 0em 0.475em;font-size: 1.25em;border-radius: 15px;background-color: rgb(210, 106, 2);border-color: rgb(210, 106, 2);color: white;"><i aria-hidden="true" class="fa fa-question"></i></button>'
+				@table_result_choice_fileds += '<input class="help_texts" type="hidden" value="'+@field_property["comment_text"]+'" name='+@field_property["variable"]+'/>'
+			else
+				@table_result_choice_fileds += '<div style="margin-right: 2.125em;float: left;"></div>'
+			end
 		end
 		if @field_property["is_num"] == 1
 			if @field_property["is_float"] == 1
-				@table_result_choice_fileds += '<input class="num_only float_num cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'"/><button class="btn-sub"></button><button class="btn-add"></button>'
+				@table_result_choice_fileds += '<div class="num_group"><input class="num_only float_num cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'"/><button class="btn-sub"></button><button class="btn-add"></button>'
 			else
-				@table_result_choice_fileds += '<form class="for_num">'
-				@table_result_choice_fileds += '<input class="num_only cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'" onkeyup="value=value.replace(/[^\d]/g,\'\') "onbeforepaste="clipboardData.setData(\'text\',clipboardData.getData(\'text\').replace(/[^\d]/g,\'\'))"/><button class="btn-sub"></button><button class="btn-add"></button>'
+				@table_result_choice_fileds += '<div class="num_group"><form class="for_num">'
+				@table_result_choice_fileds += '<input class="num_only cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;" data-range="'+@field_property["range"].to_s+'" onkeyup="value=value.replace(/[^\d]/g,\'\') "onbeforepaste="clipboardData.setData(\'text\',clipboardData.getData(\'text\').replace(/[^\d]/g,\'\'))"/><button class="btn-sub"></button><button class="btn-add"></button></div>'
+				@table_str_left += '<input class="num_only_value" type="hidden" value="0"/>'
 				@please_choice = (I18n.locale.to_s == "zh_tw") ? "請選擇" : "Please choice"
 				@table_result_choice_fileds += '<select class="select_num"><option value="">'+@please_choice+'</option>'
+				if @field_property["choice_fields"] != []
+					@field_property["choice_fields"].each do |choice|
+						@table_result_choice_fileds += ('<option value="0">' + choice.to_s + '</option>')
+					end
+				end
 				for @num in @field_property["range"][0] .. @field_property["range"][1]
 					@table_result_choice_fileds += ('<option value="' + @num.to_s + '">' + @num.to_s + '</option>')
 				end
-				@table_result_choice_fileds += '</select></form>'
+				@table_result_choice_fileds += '</select></form></div>'
 			end
 		else
 			@table_result_choice_fileds += '<div class= "cancer-btn-group cancer_form_field" id="'+@field_property["variable"]+'" style="float:left;clear:right;">'
@@ -353,7 +411,7 @@ class CancerpredictsController < ApplicationController
 		@table_result_choice_fileds += '</div><div style="clear:both;"></div>'
 	end
 	@table_result_choice_fileds += '</div></div>'
-	@table_str += (@table_button+'<div id="cancer_predict_result_block">'+@table_result_str+@table_result_choice_fileds+'</div>'+'<div style="clear:both;"></div>')
+	@table_str += (@table_button+'<div id="cancer_predict_result_block" style="font-size:' + @size_active_size + ';">'+@table_result_str+@table_result_choice_fileds+'</div>'+'<div style="clear:both;"></div>')
 	{
       "cancerpredict" => [],
 	  "extras"=>{"table"=> @table_str}
diff --git a/app/models/cancerpredictfields.rb b/app/models/cancerpredictfields.rb
index 2791799..ff3dea9 100644
--- a/app/models/cancerpredictfields.rb
+++ b/app/models/cancerpredictfields.rb
@@ -9,10 +9,10 @@ class Cancerpredictfields
   field :title ,type:String ,default:""
   field :form_show ,  :type=> Hash ,default:{0=>{:variable=>"age",:name=>{"zh_tw"=>"年齡<br/>(age)","en"=>"age"},:is_num=>1, :hint=>{'zh_tw'=>'從 18 歲(含)開始至 93 歲','en'=>''} , :comment_text=>{'zh_tw'=>'年齡為該婦女於確診罹患乳癌時之年齡','en'=>''}, :choice_fields=> {"zh_tw"=>[],"en"=>[]},:range=>[18,93],:right=>0,:is_float=>0},
 											   1=>{:variable=>"size",:name=>{"zh_tw"=>"腫瘤大小<br/>(tumor size)","en"=>"tumor size"},:is_num=>1,:hint=>{'zh_tw'=>'','en'=>''}, :comment_text=>{'zh_tw'=>'若有多個原發腫瘤，請輸入最大尺寸之原發腫瘤','en'=>''}, :choice_fields=> {"zh_tw"=>[],"en"=>[]},:range=>[1,300],:right=>0,:is_float=>0},
-											   2=>{:variable=>"lymph_nodes_examined",:name=>{"zh_tw"=>"區域淋巴結檢查數目<br/>(Regional lymph nodes examined)","en"=>"Regional lymph nodes examined"},:is_num=>1,:hint=>{'zh_tw'=>'','en'=>''}, :comment_text=>{'zh_tw'=>'','en'=>''}, :choice_fields=> {"zh_tw"=>[],"en"=>[]},:range=>[0,90],:right=>0,:is_float=>0},
-											   3=>{:variable=>"lymph_nodes_positive",:name=>{"zh_tw"=>"區域淋巴結侵犯數目<br/>(Regional lymph nodes positive)","en"=>"Regional lymph nodes positive"},:is_num=>1,:hint=>{'zh_tw'=>'','en'=>''}, :comment_text=>{'zh_tw'=>'此變項為預測重要變數，若無此資訊預測容易失真。','en'=>''}, :choice_fields=> {"zh_tw"=>[],"en"=>[]},:range=>[0,90],:right=>0,:is_float=>0},
+											   2=>{:variable=>"lymph_nodes_examined",:name=>{"zh_tw"=>"區域淋巴結檢查數目<br/>(Regional lymph nodes examined)","en"=>"Regional lymph nodes examined"},:is_num=>1,:hint=>{'zh_tw'=>'','en'=>''}, :comment_text=>{'zh_tw'=>'','en'=>''}, :choice_fields=> {"zh_tw"=>['未知'],"en"=>['unknown']},:range=>[0,90],:right=>0,:is_float=>0},
+											   3=>{:variable=>"lymph_nodes_positive",:name=>{"zh_tw"=>"區域淋巴結侵犯數目<br/>(Regional lymph nodes positive)","en"=>"Regional lymph nodes positive"},:is_num=>1,:hint=>{'zh_tw'=>'','en'=>''}, :comment_text=>{'zh_tw'=>'此變項為預測重要變數，若無此資訊預測容易失真。','en'=>''}, :choice_fields=> {"zh_tw"=>['未知'],"en"=>['unknown']},:range=>[0,90],:right=>0,:is_float=>0},
 											   4=>{:variable=>"grade",:name=>{"zh_tw"=>"腫瘤級數<br/>(tumor grade)","en"=>"tumor grade"},:is_num=>0,:hint=>{'zh_tw'=>'','en'=>''}, :comment_text=>{'zh_tw'=>'腫瘤級數代表腫瘤組織與正常組織間的分化程度，若無分化級數資訊，請選擇“未知”選項，將以級數 2 進行預測。','en'=>''}, :choice_fields=> {"zh_tw"=>['1','2','3','未知'],"en"=>['1','2','3','unknown']},:range=>[],:right=>0,:is_float=>0},
-											   5=>{:variable=>"ER_status",:name=>{"zh_tw"=>"ER 狀態<br/>(ER status)","en"=>"ER status"},:is_num=>0,:hint=>{'zh_tw'=>'','en'=>''}, :comment_text=>{'zh_tw'=>'ER:雌激素受體，若無 ER 資訊請選擇未知，將以佔多數比例陽性作為後續預測。','en'=>''}, :choice_fields=> {"zh_tw"=>['陽性','陰性','未知'],"en"=>['positive','negative','unknown']},:range=>[],:right=>1,:is_float=>0},
+											   5=>{:variable=>"ER_status",:name=>{"zh_tw"=>"ER 狀態<br/>(ER status)","en"=>"ER status"},:is_num=>0,:hint=>{'zh_tw'=>'','en'=>''}, :comment_text=>{'zh_tw'=>'ER:雌激素受體，若無 ER 資訊請選擇未知，將以佔多數比例陽性作為後續預測。','en'=>''}, :choice_fields=> {"zh_tw"=>['陽性','陰性','未知'],"en"=>['positive','negative','unknown']},:range=>[],:right=>0,:is_float=>0},
 											   6=>{:variable=>"PR_status",:name=>{"zh_tw"=>"PR 狀態<br/>(PR status)","en"=>"PR status"},:is_num=>0,:hint=>{'zh_tw'=>'','en'=>''}, :comment_text=>{'zh_tw'=>'PR:黃體素受體，若無 PR 資訊請選擇未知，將以佔多數比例陽性作為後續預測。','en'=>''}, :choice_fields=> {"zh_tw"=>['陽性','陰性','未知'],"en"=>['positive','negative','unknown']},:range=>[],:right=>1,:is_float=>0},
 											   7=>{:variable=>"HER2_status",:name=>{"zh_tw"=>"HER2 狀態<br/>(HER2 status)，","en"=>"HER2 status"},:is_num=>0,:hint=>{'zh_tw'=>'','en'=>''}, :comment_text=>{'zh_tw'=>'HER2:第二型人類上皮成長因子接受器蛋白，若無 HER2 資訊請選擇未知，將以佔多數比例陰性作為後續預測。','en'=>''}, :choice_fields=> {"zh_tw"=>['陽性','陰性','未知'],"en"=>['positive','negative','unknown']},:range=>[],:right=>1,:is_float=>0},
 											   8=>{:variable=>"Distant_Metastasis",:name=>{"zh_tw"=>"遠端轉移<br/>(DistantMetastasis)","en"=>"pathologic stage"},:is_num=>0,:hint=>{'zh_tw'=>'','en'=>''}, :comment_text=>{'zh_tw'=>'若無遠轉移資訊請選擇未知，將以佔多數比例未遠端轉移作為後續預測。','en'=>''}, :choice_fields=> {"zh_tw"=>['是','否','未知'],"en"=>['yes','no','unknown']},:range=>[],:right=>1,:is_float=>0},
@@ -30,10 +30,9 @@ class Cancerpredictfields
   }
   field :form_result_is_right , :type=> Integer ,default: 0
   field :text_descibe ,type:Hash ,default:{"zh_tw"=>"歡迎使用台灣準備乳癌癒後系統！<br/>若要開始 請在下方輸入相關資訊","en"=>" Welcome to The after breast cancer healing system of Taiwanprepare!\nTo start, please enter the relevant information below."}
-  field :small ,type:String ,default:"0.825em" 
-  field :medium ,type:String ,default:"1em" 
-  field :large ,type:String ,default:"1.25em"
-  field :image_path ,type:String ,default:"1.25em"
+  field :small ,type:Hash ,default:{'font_size'=>"0.825em",'active'=>0}
+  field :medium ,type:Hash ,default:{'font_size'=>"1em",'active'=>1}
+  field :large ,type:Hash ,default:{'font_size'=>"1.25em",'active'=>0}
   field :head_images_id ,type:Array , default: [BSON::ObjectId('5df62cfc8cd8924e79000009'), BSON::ObjectId('5df745a58cd8924491000006'), BSON::ObjectId('5df745a58cd8924491000007'), BSON::ObjectId('5df745a58cd8924491000008'), BSON::ObjectId('5df745a58cd8924491000009')]
   field :title_images_id ,type:Array , default: [BSON::ObjectId('5df87cd88cd8924491000036')]
   field :title_texts ,type:String ,default:""
diff --git a/app/views/admin/cancerpredicts/index.html.erb b/app/views/admin/cancerpredicts/index.html.erb
index e78cb1a..cadc422 100644
--- a/app/views/admin/cancerpredicts/index.html.erb
+++ b/app/views/admin/cancerpredicts/index.html.erb
@@ -140,7 +140,14 @@
 	<div style="clear:both;"></div>
 	<% @size=['small','medium','large'] %>
 	<% @size.each do |size|%>
-		<div><label class="label_left" for=<%='font_'+size%>><%=t('cancerpredict.'+size)+':'%></label><%= form.text_field size,{:value=> @form_to_show[size],:id=>'font_'+size} %></div>
+		<%= form.fields_for size do |make_size| %>
+			<div><label class="label_left" for=<%='font_'+size%>><%=t('cancerpredict.'+size)+':'%></label><%= make_size.text_field 'font_size',{:value=> @form_to_show[size]['font_size'],:id=>'font_'+size} %>
+			<% if @form_to_show[size]['active'].to_i == 1%>
+				<%= make_size.check_box 'active',{:checked=>true,:class=>"checkbox text_choice",:style=>"float:left;"}%></div>
+			<% else%>
+				<%= make_size.check_box 'active',{:checked=>false,:class=>"checkbox text_choice",:style=>"float:left;"}%></div>
+			<%end%>
+		<%end%>
 	<%end%>
 	<span class="show_span"><%= t('cancerpredict.Input_fields') %></span>
 	<div style="clear:both;"></div>
@@ -257,7 +264,7 @@
 		color:blue;
 		cursor:pointer;
 	}
-	.checkbox{
+	table .checkbox{
 		left: 50%;
 		position: absolute;
 		transform: translate(-50%, -50%) !important;
@@ -286,4 +293,10 @@
 		float: left;
 		padding-right: 0.5em;
 	}
-</style>
\ No newline at end of file
+</style>
+<script>
+	$('.text_choice').click(function(){
+		$('.text_choice').prop('checked' , false);
+		$(this).prop('checked' , true);
+	});
+</script>
\ No newline at end of file