updated survey-creator docs [azurepipelines skip]

docs/end-user-guide-how-to-create-quiz-or-assessment-test.md

@@ -0,0 +1,93 @@
+---
+title: How to Create a Quiz or Assessment Test
+description: This guide will walk you through the process of creating a sample quiz that includes dynamic "Thank You" pages with immediate feedback on the number of correct answers, a customizable Start page, and time limits that make respondents adjust their pace.
+---
+
+# How to Create a Quiz or Assessment Test
+
+## About Quizzes and Assessment Tests
+
+Quizzes and assessment tests are a great way to engage your students and test their knowledge on a particular topic. With SurveyJS, you can create multiple online quizzes and assessment forms, add timing and scoring to them, customize their look, and provide immediate and personalized feedback to each respondent on the "Thank you" page. This guide will walk you through the process of creating a sample quiz.
+
+## Available Question Types for Quizzes
+
+In SurveyJS, you can use any question type in your quizzes or tests. This includes simple types like Radio Button Group and Checkboxes, as well as more complex types, such as Multiple Textboxes and matrices that accept multiple answers.
+
+## How to Assign a Correct Answer
+
+To assign a correct answer to a question, follow these steps:
+
+1. Choose the question for which you want to assign a correct answer.  
+2. Under the **Data** category, find the **Set Correct Answer** property and click it to open a popup with the question and its options.  
+3. In the popup, assign the correct answer(s) and click **Apply**.<br><br>
+   <img src="../images/eud-set-correct-answer 1273 648.png" alt="How to set correct answers in a quiz" width="1273" height="648"> 
+4. Once set, you can change the answer if needed, using the **Change Correct Answer** button.  
+5. If you want to remove the assigned answer, click **Clear**.<br><br>
+   <img src="../images/eud-change-correct-answer 400 472.png" alt="How to change or delete the correct answer set for a question" width="400" height="472">
+
+## How to Configure Quiz or Test Settings
+
+To create a quiz or assessment test, follow the steps below:
+
+1. In the top-right corner of the survey editor, switch to survey-level settings.  
+2. Under the **Quiz Mode** category, locate the **Time limit to complete the survey** setting and specify its value in seconds. This defines the time after which the survey automatically moves to the "Thank You" page.  
+3. If you want to limit the time per page, assign a value to the **Time limit to complete one page** property. This hides the "Previous" navigation button and advances automatically to the next page once time runs out.  
+4. The **Timer alignment** property lets you control the position of the timer. Set it to **Top** (default) or **Bottom** based on your preference and layout requirements. The **Hidden** value disables the timer.<br><br>
+   <img src="../images/eud-quiz-mode 400 692.png" alt="Quiz mode settings" width="400" height="692">
+5. Use the **Timer mode** property to decide if the timer will display the time limit set for the entire survey, for individual pages, or both.<br><br>
+   <img src="../images/eud-timer-mode-both 892 492.png" alt="How to set the timer mode for a quiz" width="892" height="492">
+
+## How to Add a Start Page
+
+A Start Page in a quiz is useful for providing instructions, gathering respondent details, and keeping the timer off until the actual quiz begins.
+
+<img src="../images/eud-quiz-start-page 823 724.png" alt="A Start Page in a quiz" width="823" height="724">
+
+To add a Start Page to your quiz or test, follow these steps:
+
+1. On the first page, add introductory text or instructions (using the HTML question type). You can also ask respondents to provide information, such as their name using a Single-Line Input question.  
+2. Switch to the survey-level settings in the top right corner of the editor and under the **Navigation** category, enable the **First page is the start page** property. This will make the first page function as a non-graded introduction.<br><br>
+   <img src="../images/eud-first-page-start-page 1242 801.png" alt="How to add a Start Page to a quiz" width="1242" height="801">
+
+## How to Show the Number of Correct Answers
+
+SurveyJS allows you to provide immediate feedback to your respondent by showing the number of correct answers on the "Thank You" page. To create dynamic content for your "Thank you" pages, you can use the following variables:
+
+* `{correctAnswers}` – Displays the number of correct answers selected.  
+* `{questionCount}` – Displays the total number of questions with an assigned correct answer.
+
+To display the number of correct answers the "Thank You" page, do the following:
+
+1. Switch to survey-level settings and find the **"Thank You" page** category.  
+2. In the **"Thank You" page markup** field, enter the following sample value:  
+   `'<h4>You got <b>{correctAnswers}</b> out of <b>{questionCount}</b> correct answers.</h4>'`  
+   This will display the number of correct answers out of the total.
+
+## How to Create Dynamic Feedback on the "Thank You" Page Using HTML Markup
+
+You can provide more detailed feedback based on specific conditions. For example, you can show different messages when all answers are correct or none are correct. To do this:
+
+1. Go to the **Dynamic "Thank You" page markup** property under the **"Thank You" page** category.  
+2. Click the **Plus** icon to add a new version for the "Thank you" page.  
+3. Set conditions and HTML markup:  
+   * For no correct answers, enter `{correctAnswers} == 0` in the **Expression** field and set the **HTML markup** field to:  
+     `'<h4>Unfortunately, none of your answers is correct. Please try again.</h4>'`  
+   * For all correct answers, enter `{correctAnswers} == {questionCount}` in the **Expression** field and set the **HTML markup** field to:  
+     `'<h4>Congratulations! You answered all the questions correctly!</h4>'`  
+4. Optionally, click the **Plus** icon to add more conditions and custom responses as needed.
+
+## How to Create Custom Conditions for Dynamic "Thank You" Pages
+
+SurveyJS allows you to create an unlimited number of custom "Thank You" pages. To create custom conditions:
+
+1. Follow the [first two steps to add a dynamic "Thank You" page](#how-to-create-dynamic-feedback-on-the-thank-you-page-using-html-markup).  
+2. Instead of manually entering an expression, click the **Magic wand** icon to open a condition builder.  
+3. In the popup, define a condition that triggers a specific "Thank You" page version when met.  
+4. Once a condition is set, click **Apply** to save your changes.<br><br>
+   <img src="../images/eud-expression-gui 1099 709.png" alt="How to create conditions for custom 'Thank You' pages" width="1099" height="709">
+
+> If you are unfamiliar with HTML and markup customization, refer to the W3Schools's <a href="https://www.w3schools.com/html/html_intro.asp" target="_blank">HTML Introduction Guide</a> for basic information.
+
+By following the steps above, you can create quizzes or assessment tests that include dynamic "Thank You" pages with immediate feedback on the number of correct answers, a customizable Start page, and configurable timing options that make respondents adjust their pace. 
+
+SurveyJS also supports scoring features. However, its configuration requires the involvement of a developer. Refer to [Scored Survey](https://surveyjs.io/form-library/examples/create-a-scored-survey/) demo to learn how to add scoring to your survey.

docs/end-user-guide-how-to-vertically-align-input-fields-in-survey.md

@@ -0,0 +1,52 @@
+---
+title: How to Vertically Align Input Fields in a Form
+description: This guide will walk you through how to set up vertical input field alignment using the Question title width property.
+---
+# How to Vertically Align Input Fields in a Form
+
+## About Vertical Input Field Alignment
+
+When question titles are left-aligned, the associated input fields can sometimes look disorganized due to varying title widths. This often occurs because the width of a question title depends on the number of characters it contains, leading to uneven spacing. 
+
+<img src="../images/eud-before-alignment.png" alt="A form with multiple input fields" width="1390" height="791">
+
+To solve this, SurveyJS introduced a **Question title width** setting, which allows you to apply a consistent width to all questions within a page or panel and align input fields more neatly. This guide will walk you through how to set up vertical input field alignment using the **Question title width** property.
+
+<img src="../images/eud-after.png" alt="How to vertically alight input field in a form" width="1389" height="803">
+
+## How to Enable Vertical Input Field Alignment
+
+To apply a consistent width to question titles, follow these steps:
+
+1. Select a page or panel where you'd like to apply the changes.  
+2. Under the **Question Settings** category, locate the **Question title alignment** property.  
+3. Set the **Question title alignment** to **Left**. Once this is done, the **Question title width** property will appear.  
+4. Enter the desired value in the **Question title width** editor. This value will define a uniform width for all question titles in the selected page or panel. The property accepts all commonly used CSS values (px, %, in, pt, etc.).
+
+<img src="../images/eud-page-panel.png" alt="How to set up vertical input field alignment for a page or panel using the new Question title width property." width="401" height="505">
+
+## How to Apply Question Title Alignment at the Survey Level
+
+The **Question title alignment** setting is also available at the survey level, with the default alignment set to **Top**. This alignment applies to all questions within the survey by default. If you want to change the alignment at the survey level, do the following:
+
+1. Switch to the survey-level settings in the top right corner.  
+2. Under the **Question settings** category, find the **Question title alignment** property and change it to **Left**.
+
+<img src="../images/eud-survey-level.png" alt="How to vertically alight input field in the entire form" width="400" height="495">
+
+This will apply left alignment to all questions in the survey. However, please note that to customize the **Question title width**, you will need to access the settings of individual pages or panels.
+
+## Title Alignment Overriding Rules
+
+**Question title alignment** can be overridden by settings at different levels:
+
+* Survey level      
+Default alignment ("Top" by default) applies to all questions.  
+
+* Panel or page level       
+Overrides the survey-level setting.
+
+* Question level        
+If set, overrides the panel, page, and survey-level settings.
+
+This hierarchy ensures flexibility to control the alignment and width settings at various levels within your survey.

docs/property-grid-customization.md

@@ -11,9 +11,9 @@ Property Grid displays the properties of a selected survey element and allows a
 
 ## Hide Properties from the Property Grid
 
-If you do not want users to change a survey property, you can hide it from the Property Grid. Survey Creator allows you to hide an individual property or multiple properties at once.
+If you want to prevent users from accessing or modifying a certain survey element's property, you can hide it from the Property Grid. Survey Creator allows you to hide either an individual property or multiple properties at once.
 
-To hide a single survey property, call the `getProperty(questionType, propertyName)` method on the `Survey.Serializer` object as follows:
+To hide a single property, access it using the `Serializer`'s `getProperty(className, propertyName)` method and set its `visible` attribute to `false`:
 
 ```js
 // Hide the `title` property for Boolean questions
@@ -24,7 +24,7 @@ import { Serializer } from "survey-core";
 Serializer.getProperty("boolean", "title").visible = false;
 ```
 
-If you want to hide multiple properties, handle the Survey Creator's [`onShowingProperty`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onShowingProperty) event. Its second parameter exposes the `canShow` Boolean property. Disable it for the properties you want to hide. The following example illustrates two cases: hide black-listed properties and keep only white-listed properties. This code hides the properties for [Panel](https://surveyjs.io/Documentation/Library?id=panelmodel) questions.
+If you want to hide multiple properties, handle the Survey Creator's [`onShowingProperty`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onShowingProperty) event. Its second parameter includes the `canShow` Boolean property. Disable it for the properties you want to hide. The following example illustrates two cases: hide black-listed properties and keep only white-listed properties. This code hides the properties for [Panel](https://surveyjs.io/Documentation/Library?id=panelmodel) questions.
 
 ```js
 const blackList = [ "visible", "isRequired" ];
@@ -33,7 +33,7 @@ const blackList = [ "visible", "isRequired" ];
 creator.onShowingProperty.add(function (_, options) {
   if (options.obj.getType() == "panel") {
     // Hide properties found in `blackList`
-    options.canShow = blackList.indexOf(options.property.name) < 0;
+    options.canShow = blackList.indexOf(options.property.name) === -1;
 
     // Hide all properties except those found in `whiteList`
     // options.canShow = whiteList.indexOf(options.property.name) > -1;
@@ -45,7 +45,7 @@ creator.onShowingProperty.add(function (_, options) {
 
 ## Override Default Property Values
 
-You can specify a different default value for a property in Property Grid. To do this, call `Serializer`'s `getProperty(questionType, propertyName)` method and change the property's `defaultValue` setting:
+You can specify a different default value for a property in Property Grid. To do this, call `Serializer`'s `getProperty(className, propertyName)` method and change the property's `defaultValue` setting:
 
 ```js
 // Override the default value of the `isAllRowRequired` property for Single-Select Matrix questions

docs/sidebar.json

@@ -112,6 +112,10 @@
           "Name": "end-user-guide-how-to-format-user-input-for-single-line-fields",
           "Title": "Format User Input for Single-Line Fields"
         },
+        {
+          "Name": "end-user-guide-how-to-vertically-align-input-fields-in-survey",
+          "Title": "Vertically Align Input Fields"
+        },
         {
           "Name": "end-user-guide-how-to-calculate-duration-between-dates-within-form",
           "Title": "Calculate Duration Between Dates"
@@ -139,6 +143,10 @@
         {
           "Name": "end-user-guide-how-to-create-transfer-list",
           "Title": "Create a Transfer List"
+        },
+        {
+          "Name": "end-user-guide-how-to-create-quiz-or-assessment-test",
+          "Title": "Create a Quiz or Assessment Test"
         }
       ]
     },