Fixed Misaligned first answer choice box

- Added grid items min and max widths for each items.
- Added minimumScaleFactor to the text which is min of 10 pt.
- Added line limit to text. it will render max 10 line of text and after ends with ellipsis.
- Added content for preview for LongForm, LongQuestView, QuestOptions

Ticket: https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/2033/

Author: srikanth-vg

GoInfoGame/GoInfoGame/quests/LongQuests/Components/QuestOptions.swift

@@ -38,9 +38,9 @@ struct QuestOptions: View {
         switch questType {
         case .exclusiveChoice:
             let columns = [
-                GridItem(.flexible(), spacing: 30),
-                GridItem(.flexible(), spacing: 30),
-                GridItem(.flexible(), spacing: 30),
+                GridItem(.flexible(minimum: 10.0, maximum: 100.0), spacing: 30),
+                GridItem(.flexible(minimum: 10.0, maximum: 100.0), spacing: 30),
+                GridItem(.flexible(minimum: 10.0, maximum: 100.0), spacing: 30),
             ]
             ZStack {
                 ScrollView {
@@ -142,12 +142,18 @@ struct QuestOptions: View {
                                                             .font(.system(size: 15, weight: .bold))
                                                             .foregroundColor(.black)
                                                             .offset(x: offset.0, y: offset.1)
+                                                            .frame(width: 100, height: 100)
+                                                            .minimumScaleFactor(0.67) // min font size is 10
+                                                            .lineLimit(10)
                                                     }
 
                                                     Text(option.choiceText)
                                                         .font(.system(size: 15, weight: .bold))
                                                         .foregroundColor(.white)
                                                         .shadow(color: Color.black.opacity(0.7), radius: 4, x: 0, y: 2)
+                                                        .frame(width: 100, height: 100)
+                                                        .minimumScaleFactor(0.67) // min font size is 10
+                                                        .lineLimit(10)
                                                 }
                                             }
                                         }
@@ -217,6 +223,11 @@ struct QuestOptions: View {
        }
 }
 
-//#Preview {
-//    QuestOptions(options: ["Ashpalt", "Concrete", "Brick", "Others"], selectedOption: "")
-//}
+#Preview {
+    QuestOptions(options: [QuestAnswerChoice(value: "yes", choiceText: "Yes, this roadway can be crossed safely.", imageURL: nil, choiceFollowUp: nil),
+                           QuestAnswerChoice(value: "no", choiceText: "No, this roadway is too wide to cross safely.", imageURL: nil, choiceFollowUp: nil)], selectedAnswerId: .constant(UUID()), onChoiceSelected: { qa in
+        
+    }, questType: GoInfoGame.QuestType.exclusiveChoice, currentAnswer: .constant("Binding<String?>")) { s in
+        
+    }
+}

GoInfoGame/GoInfoGame/quests/LongQuests/View/LongForm.swift

@@ -325,5 +325,14 @@ struct LongForm: View, QuestForm {
 }
 
 #Preview {
-    LongForm()
+    let quest = LongFormElement(elementType: "Sidewalks", questQuery: "ways with (highway=footway and footway=sidewalk)", elementTypeIcon: "icon", quests: [LongQuest(questID: 14,
+                                                                                                                           questTitle: "Does the length of this crossing allow for safe navigation?",
+                                                                                                                           questDescription: "Determine whether this crossing is short enough to cross safely.",
+                                                                                                                           questType: .exclusiveChoice,
+                                                                                                                           questTag: "ext:crossing_adequate_length",
+                                                                                                                           questAnswerChoices: [QuestAnswerChoice(value: "yes", choiceText: "Yes, this roadway can be crossed safely. this is to test the line limit functionlity. want to see the max capability of this feature. the max lines should be 10. this is for our obervations only. till now it is able to render 10 lines with out any issue.", imageURL: nil, choiceFollowUp: nil),
+                                                                                                                                                QuestAnswerChoice(value: "no", choiceText: "No, this roadway is too wide to cross safely.", imageURL: nil, choiceFollowUp: nil)], questImageURL: nil, questAnswerValidation: nil, questAnswerDependency: nil, questUserAnswer: nil)])
+    QuestsRepository.shared.longQuestModels.append(quest)
+    return LongForm(elementName: quest.elementType, questID: "questId",query: quest.questQuery, action: { tags in
+                })
 }

GoInfoGame/GoInfoGame/quests/LongQuests/View/LongQuestView.swift

@@ -58,3 +58,21 @@ struct LongQuestView: View {
     }
 
 }
+
+#Preview {
+    let longQeust = LongQuest(questID: 14,
+                              questTitle: "Does the length of this crossing allow for safe navigation?",
+                              questDescription: "Determine whether this crossing is short enough to cross safely.",
+                              questType: .exclusiveChoice,
+                              questTag: "ext:crossing_adequate_length",
+                              questAnswerChoices: [QuestAnswerChoice(value: "yes", choiceText: "Yes, this roadway can be crossed safely.", imageURL: nil, choiceFollowUp: nil),
+                                                   QuestAnswerChoice(value: "no", choiceText: "No, this roadway is too wide to cross safely.", imageURL: nil, choiceFollowUp: nil)], questImageURL: nil, questAnswerValidation: nil, questAnswerDependency: nil, questUserAnswer: nil)
+    
+    
+    
+    LongQuestView(selectedAnswers: .constant([UUID(): UUID()]), quest: longQeust, onChoiceSelected: { qa in
+        
+    }, uploadPhoto: { s in
+        
+    }, currentAnswer: .constant(nil))
+}