[Fork] [Fork] [Fork] [Fork] [Fork] [Fork] [Fork] Uvod do programovani 1.1 - Vstup/vystup a zakladni operace | C# Online Compiler

[Fork] [Fork] [Fork] [Fork] [Fork] [Fork] [Fork] Uvod do programovani 1.1 - Vstup/vystup a zakladni operace by Kateřina Denninger

Model

​x
 
​

@{
	Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Úvod do programování 1</title>

		<!-- CSS Includes -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
		
		<style type="text/css">
			h1 {
				margin: 20px 0;
			}
			
			h2 {
				font-size: 15px;
			}
			
			table {
				margin-top: 10px;
				margin-bottom: 10px;
			}
			
			.card-header {
				cursor: pointer;
			}
			
			.card-header h2:before {
				display: inline-block;
				width: 10px;
				height: 10px;
				background: #273582;
				content: ""
			}
			
			.card-header.optional h2:before {
				background: #E5007D;
			}
			
			.card-body, button, input {
				font-size: 13px !important;
			}
			
			.exercise {
				border: 1px solid rgba(0,0,0,.125);
				padding: 10px;
			}
			
			input[type="text"], input[type="number"] {
				max-width: 80px;
				display: inline-block !important;
				margin-right: 5px;
			}
			
			input[type="checkbox"], input[type="radio"]
			{
				display: block;
    			width: 20px;
    			height: 18px;
				float: left;
			}
			
			.checkbox-label {
				display: block;
				margin-left: 5px;
				margin-right: 10px;
				float: left;
			}
			
			#collapseExercise1 input, #collapseExercise8 input[type="number"], #collapseExercise9 input[type="number"], #collapseExercise10 input[type="number"] {
				max-width: 100%;
				display: block;
				margin-right: 0;
			}
			
			#collapseExercise2 button {
				display: inline-block;
				margin-right: 5px;
				width: 50px;
				font-weight: bold;
			}
			
			.result {
				display: inline-block;
				background: #e0e0e0;
				min-width: 20px;
				height: 22px;
				border: 1px solid #000000;
				padding: 2px;
			}
			
			.tip {
				border: 1px solid #007BFF;
				margin-top: 10px;
				padding: 5px;
			}
			
			.tip .icon, .tip .text {
				display: inline-block;
				float: left;
			}
			
			.tip .icon {
				width: 40px;
				font-size: 30px;
				color: #007BFF;
				font-weight: bold;
				text-align: center;
				margin-left: -5px;
			}
			
			.tip .text {
				width: calc(100% - 40px);
			}
			
			.clear {
				clear: both;
			}
			
			.error {
				border: 1px solid #ff4f4f;
				color: #ff4f4f;
				margin-bottom: 10px;
				padding: 5px;
			}
			
			.hidden {
				display: none;
			}
			
			.visible {
				display: block;
			}
		</style>
	</head>
	
	<body>
		<div class="container">
			<h1>Úvod do programování 1</h1>
			<div class="accordion" id="exercises">
  				<div class="card">
    				<div class="card-header" id="exercise1" data-toggle="collapse" data-target="#collapseExercise1" aria-expanded="true" aria-controls="collapseExercise1">
      					<h2 class="mb-0">
							Příklad 1 – Vstup/výstup
      					</h2>
    				</div>

    				<div id="collapseExercise1" class="collapse" aria-labelledby="exercise1" data-parent="#exercises">
      					<div class="card-body">
							<p><strong>Zadání:</strong> Uživatel zadá do připravených políček své jméno a příjmení. Tvým úkolem je tyto údaje spojit do celého jména. Výsledek ulož do proměnné <code>celeJmeno</code>.</p>
							<div class="exercise">
								<div class="form-group">
									<label for="exercise1name">Jméno</label>
									<input type="text" class="form-control" id="exercise1name" />
								</div>
								<div class="form-group">
									<label for="exercise1surname">Příjmení</label>
									<input type="text" class="form-control" id="exercise1surname" />
								</div>
								<button class="btn btn-primary mb-2" id="submit1">Odeslat</button>
								<p>Ahoj <span class="result" id="result1">&nbsp;</span>, vítej na workshopu Úvod do programování. Ať se ti daří!</p>
							</div>
      					</div>
    				</div>
  				</div>
				<div class="card">
    				<div class="card-header" id="exercise2" data-toggle="collapse" data-target="#collapseExercise2" aria-expanded="true" aria-controls="collapseExercise2">
      					<h2 class="mb-0">
							Příklad 2 – Základní operace
      					</h2>
    				</div>

    				<div id="collapseExercise2" class="collapse" aria-labelledby="exercise2" data-parent="#exercises">
      					<div class="card-body">
							<p><strong>Zadání:</strong> Uživatel zadá do připravených políček dvě celá čísla.
								Tvým úkolem je spočítat jejich součet, rozdíl, součin a podíl. Každá operace má vlastní tlačítko. Výsledek vždy ulož do proměnné <code>vysledek</code>.</p>
							<div class="exercise">
								<div class="form-group">
									<input type="number" class="form-control" id="exercise2number1" />
									<input type="number" class="form-control" id="exercise2number2" />
								</div>
								<div class="form-group">
									<button class="btn btn-primary mb-2" id="submit2add">+</button>
									<button class="btn btn-primary mb-2" id="submit2substract">–</button>
									<button class="btn btn-primary mb-2" id="submit2multiply">*</button>
									<button class="btn btn-primary mb-2" id="submit2divide">/</button>
								</div>
								<div id="error2" class="error hidden">Některé z čísel není celé číslo!</div>
								<p>Výsledek: <span class="result" id="result2">&nbsp;</span></p>
							</div>
							<div class="tip">
								<div class="icon">?</div>
								<div class="text">
									Datový typ proměnné <code>vysledek</code> je <code>int?</code>.
									Otazník za názvem datového typu počítači říká, že proměnná může obsahovat <code>null</code>, tedy 
									neplatnou hodnotu. Až budeš vytvářet vlastní proměnné, používej označení datového typu bez otazníku, např. <code>int</code>.
								</div>
								<div class="clear"></div>
							</div>
							<div class="tip">
								<div class="icon">!</div>
								<div class="text">
									Všimni si, že pro výsledek sčítání, odčítání a násobení používáme datový typ <code>int</code>, tedy celá čísla.
									Pro dělení jsme ale použili <code>double</code> – datový typ pro desetinná čísla.
								</div>
								<div class="clear"></div>
							</div>
      					</div>
    				</div>
  				</div>
				<div class="card">
    				<div class="card-header optional" id="exercise3" data-toggle="collapse" data-target="#collapseExercise3" aria-expanded="true" aria-controls="collapseExercise3">
      					<h2 class="mb-0">
							Příklad 3 – Základní operace
      					</h2>
    				</div>

    				<div id="collapseExercise3" class="collapse" aria-labelledby="exercise3" data-parent="#exercises">
      					<div class="card-body">
							<p><strong>Zadání:</strong> Uživatel zadá do připraveného políčka cenu zboží. Sleva na zboží je 15 %. Spočítej cenu zboží po slevě. Výsledek ulož do proměnné <code>cenaPoSleve</code>.</p>
							<div class="exercise">
								<div class="form-group">
									<input type="number" class="form-control" id="exercise3number" /> Kč
								</div>
								<button class="btn btn-primary mb-2" id="submit3">Odeslat</button>
								<div id="error3" class="error hidden">Číslo není kladné!</div>
								<p>Cena zboží po slevě: <span class="result" id="result3">&nbsp;</span> Kč</p>
							</div>
      					</div>
    				</div>
  				</div>
				<div class="card">
    				<div class="card-header optional" id="exercise4" data-toggle="collapse" data-target="#collapseExercise4" aria-expanded="true" aria-controls="collapseExercise4">
      					<h2 class="mb-0">
							Příklad 4 – Základní operace
      					</h2>
    				</div>

    				<div id="collapseExercise4" class="collapse" aria-labelledby="exercise4" data-parent="#exercises">
      					<div class="card-body">
							<p><strong>Zadání:</strong> Uživatel zadá do připravených políček dvě čísla. Spočítej průměr těchto dvou čísel. Výsledek ulož do proměnné <code>prumer</code>.</p>
							<div class="exercise">
								<div class="form-group">
									<input type="number" class="form-control" id="exercise4number1" />
									<input type="number" class="form-control" id="exercise4number2" />
								</div>
								<button class="btn btn-primary mb-2" id="submit4">Odeslat</button>
								<p>Průměr čísel: <span class="result" id="result4">&nbsp;</span></p>
							</div>
							<div class="tip">
								<div class="icon">?</div>
								<div class="text">
									Průměr dvou čísel c<sub>1</sub> a c<sub>2</sub> se spočítá jako (c<sub>1</sub> + c<sub>2</sub>)/2.
								</div>
								<div class="clear"></div>
							</div>
      					</div>
    				</div>
  				</div>
				<div class="card">
    				<div class="card-header optional" id="exercise5" data-toggle="collapse" data-target="#collapseExercise5" aria-expanded="true" aria-controls="collapseExercise5">
      					<h2 class="mb-0">
							Příklad 5 – Základní operace
      					</h2>
    				</div>

    				<div id="collapseExercise5" class="collapse" aria-labelledby="exercise5" data-parent="#exercises">
      					<div class="card-body">
							<p><strong>Zadání:</strong> Uživatel zadá do připravených políček vzdálenost, kterou ujel (v kilometrech), a čas, jak dlouho mu cesta trvala (v hodinách). Spočítej průměrnou rychlost. Výsledek ulož do proměnné <code>rychlost</code>.</p>
							<div class="exercise">
								<div class="form-group">
									<label for="exercise5distance">Vzdálenost:</label>
									<input type="number" class="form-control" id="exercise5distance" /> km
								</div>
								<div class="form-group">
									<label for="exercise5time">Čas:</label>
									<input type="number" class="form-control" id="exercise5time" /> h
								</div>
								<button class="btn btn-primary mb-2" id="submit5">Odeslat</button>
								<div id="error5" class="error hidden">Některé z čísel není kladné!</div>
								<p>Průměrná rychlost: <span class="result" id="result5">&nbsp;</span> km/h</p>
							</div>
							<div class="tip">
								<div class="icon">?</div>
								<div class="text">
									Průměrná rychlost se spočítá jako podíl vzdálenosti a času.
								</div>
								<div class="clear"></div>
							</div>
      					</div>
    				</div>
  				</div>
			</div>
		</div>

		<!-- JS includes -->
		<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
		
		<script type="text/javascript">
		
			$(function(){
			
				$('#submit1').click(function(){
					var name = document.getElementById("exercise1name").value;
					var surname = document.getElementById("exercise1surname").value;
					document.getElementById("submit1").disabled = true;
			
					$.ajax({
						url: '@Url.RouteUrl(new{ action="Priklad1", controller="Home"})',
						type: 'GET',
						data: { jmeno: name , prijmeni: surname },
						contentType: "application/json; charset=utf-8",
						success: function(response) {
							if (response !== "") {
								document.getElementById("result1").innerHTML = response;
							}
			
							document.getElementById("submit1").disabled = false;
						}
					});
				});
			
				function showDiv(id) {
					document.getElementById(id).classList.remove("hidden");
					document.getElementById(id).classList.add("visible");
				}
			
				function hideDiv(id) {
					document.getElementById(id).classList.remove("visible");
					document.getElementById(id).classList.add("hidden");
				}
			
				function validateInt(number) {
					return number !== "" && number !== undefined && Number.isInteger(Number(number));
				}
			
				$('#submit2add').click(function(){
					hideDiv("error2");
			
					var number1 = document.getElementById("exercise2number1").value;
					var number2 = document.getElementById("exercise2number2").value;
			
					if (!validateInt(number1) || !validateInt(number2)) {
						showDiv("error2");
						return;
					}
			
					document.getElementById("submit2add").disabled = true;
			
					$.ajax({
						url: '@Url.RouteUrl(new{ action="Priklad2Scitani", controller="Home"})',
						type: 'GET',
						data: { cislo1: number1 , cislo2: number2 },
						contentType: "application/json; charset=utf-8",
						success: function(response) {
							if (response !== "") {
								document.getElementById("result2").innerHTML = response;
							}
			
							document.getElementById("submit2add").disabled = false;
						}
					});
				});
			
				$('#submit2substract').click(function(){
					hideDiv("error2");
			
					var number1 = document.getElementById("exercise2number1").value;
					var number2 = document.getElementById("exercise2number2").value;
			
					if (!validateInt(number1) || !validateInt(number2)) {
						showDiv("error2");
						return;
					}
			
					document.getElementById("submit2substract").disabled = true;
			
					$.ajax({
						url: '@Url.RouteUrl(new{ action="Priklad2Odcitani", controller="Home"})',
						type: 'GET',
						data: { cislo1: number1 , cislo2: number2 },
						contentType: "application/json; charset=utf-8",
						success: function(response) {
							if (response !== "") {
								document.getElementById("result2").innerHTML = response;
							}
			
							document.getElementById("submit2substract").disabled = false;
						}
					});
				});
			
				$('#submit2multiply').click(function(){
					hideDiv("error2");
			
					var number1 = document.getElementById("exercise2number1").value;
					var number2 = document.getElementById("exercise2number2").value;
			
					if (!validateInt(number1) || !validateInt(number2)) {
						showDiv("error2");
						return;
					}
			
					document.getElementById("submit2multiply").disabled = true;
			
					$.ajax({
						url: '@Url.RouteUrl(new{ action="Priklad2Nasobeni", controller="Home"})',
						type: 'GET',
						data: { cislo1: number1 , cislo2: number2 },
						contentType: "application/json; charset=utf-8",
						success: function(response) {
							if (response !== "") {
								document.getElementById("result2").innerHTML = response;
							}
			
							document.getElementById("submit2multiply").disabled = false;
						}
					});
				});
			
				$('#submit2divide').click(function(){
					hideDiv("error2");
			
					var number1 = document.getElementById("exercise2number1").value;
					var number2 = document.getElementById("exercise2number2").value;
			
					if (!validateInt(number1) || !validateInt(number2)) {
						showDiv("error2");
						return;
					}
			
					document.getElementById("submit2divide").disabled = true;
			
					$.ajax({
						url: '@Url.RouteUrl(new{ action="Priklad2Deleni", controller="Home"})',
						type: 'GET',
						data: { cislo1: number1 , cislo2: number2 },
						contentType: "application/json; charset=utf-8",
						success: function(response) {
							if (response !== "") {
								document.getElementById("result2").innerHTML = response;
							}
			
							document.getElementById("submit2divide").disabled = false;
						}
					});
				});
			
				$('#submit3').click(function(){
					hideDiv("error3");
			
					var number = document.getElementById("exercise3number").value;
			
					if (Number(number) <= 0) {
						showDiv("error3");
						return;
					}
			
					document.getElementById("submit3").disabled = true;
			
					$.ajax({
						url: '@Url.RouteUrl(new{ action="Priklad3", controller="Home"})',
						type: 'GET',
						data: { cena: number },
						contentType: "application/json; charset=utf-8",
						success: function(response) {
							if (response !== "") {
								document.getElementById("result3").innerHTML = response;
							}
			
							document.getElementById("submit3").disabled = false;
						}
					});
				});
			
				$('#submit4').click(function(){			
					var number1 = document.getElementById("exercise4number1").value;
					var number2 = document.getElementById("exercise4number2").value;
			
					document.getElementById("submit2divide").disabled = true;
			
					$.ajax({
						url: '@Url.RouteUrl(new{ action="Priklad4", controller="Home"})',
						type: 'GET',
						data: { cislo1: number1, cislo2: number2 },
						contentType: "application/json; charset=utf-8",
						success: function(response) {
							if (response !== "") {
								document.getElementById("result4").innerHTML = response;
							}
			
							document.getElementById("submit4").disabled = false;
						}
					});
				});
			
				$('#submit5').click(function(){
					hideDiv("error5");
			
					var distance = document.getElementById("exercise5distance").value;
					var time = document.getElementById("exercise5time").value;
			
					if (Number(distance) <= 0 || Number(time) <= 0) {
						showDiv("error5");
						return;
					}
			
					document.getElementById("submit5").disabled = true;
			
					$.ajax({
						url: '@Url.RouteUrl(new{ action="Priklad5", controller="Home"})',
						type: 'GET',
						data: { vzdalenost: distance , cas: time },
						contentType: "application/json; charset=utf-8",
						success: function(response) {
							if (response !== "") {
								document.getElementById("result5").innerHTML = response;
							}
			
							document.getElementById("submit5").disabled = false;
						}
					});
				});
			});

		</script>
	</body>
</html>

View

 
@{
    Layout = null;
}
​
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
​
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Úvod do programování 1</title>
​
        <!-- CSS Includes -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        
        <style type="text/css">
            h1 {
                margin: 20px 0;
            }
            
            h2 {
                font-size: 15px;
            }
            
            table {
                margin-top: 10px;
                margin-bottom: 10px;
            }
            
            .card-header {
                cursor: pointer;
            }
            
            .card-header h2:before {
                display: inline-block;
                width: 10px;
                height: 10px;
                background: #273582;
                content: ""
            }
            
            .card-header.optional h2:before {
                background: #E5007D;
            }
            
            .card-body, button, input {
                font-size: 13px !important;
            }
            
            .exercise {
                border: 1px solid rgba(0,0,0,.125);
                padding: 10px;
            }
            
            input[type="text"], input[type="number"] {
                max-width: 80px;
                display: inline-block !important;
                margin-right: 5px;
            }
            
            input[type="checkbox"], input[type="radio"]
            {
                display: block;
                width: 20px;
                height: 18px;
                float: left;
            }
            
            .checkbox-label {
                display: block;
                margin-left: 5px;
                margin-right: 10px;
                float: left;
            }
            
            #collapseExercise1 input, #collapseExercise8 input[type="number"], #collapseExercise9 input[type="number"], #collapseExercise10 input[type="number"] {
                max-width: 100%;
                display: block;
                margin-right: 0;
            }
            
            #collapseExercise2 button {
                display: inline-block;
                margin-right: 5px;
                width: 50px;
                font-weight: bold;
            }
            
            .result {
                display: inline-block;
                background: #e0e0e0;
                min-width: 20px;
                height: 22px;
                border: 1px solid #000000;
                padding: 2px;
            }
            
            .tip {
                border: 1px solid #007BFF;
                margin-top: 10px;
                padding: 5px;
            }
            
            .tip .icon, .tip .text {
                display: inline-block;
                float: left;
            }
            
            .tip .icon {
                width: 40px;
                font-size: 30px;
                color: #007BFF;
                font-weight: bold;
                text-align: center;
                margin-left: -5px;
            }
            
            .tip .text {
                width: calc(100% - 40px);
            }
            
            .clear {
                clear: both;
            }
            
            .error {
                border: 1px solid #ff4f4f;
                color: #ff4f4f;
                margin-bottom: 10px;
                padding: 5px;
            }
            
            .hidden {
                display: none;
            }
            
            .visible {
                display: block;
            }
        </style>
    </head>
    
    <body>
        <div class="container">
            <h1>Úvod do programování 1</h1>
            <div class="accordion" id="exercises">
                <div class="card">
                    <div class="card-header" id="exercise1" data-toggle="collapse" data-target="#collapseExercise1" aria-expanded="true" aria-controls="collapseExercise1">
                        <h2 class="mb-0">
                            Příklad 1 – Vstup/výstup
                        </h2>
                    </div>
​
                    <div id="collapseExercise1" class="collapse" aria-labelledby="exercise1" data-parent="#exercises">
                        <div class="card-body">
                            <p><strong>Zadání:</strong> Uživatel zadá do připravených políček své jméno a příjmení. Tvým úkolem je tyto údaje spojit do celého jména. Výsledek ulož do proměnné <code>celeJmeno</code>.</p>
                            <div class="exercise">
                                <div class="form-group">
                                    <label for="exercise1name">Jméno</label>
                                    <input type="text" class="form-control" id="exercise1name" />
                                </div>
                                <div class="form-group">
                                    <label for="exercise1surname">Příjmení</label>
                                    <input type="text" class="form-control" id="exercise1surname" />
                                </div>
                                <button class="btn btn-primary mb-2" id="submit1">Odeslat</button>
                                <p>Ahoj <span class="result" id="result1">&nbsp;</span>, vítej na workshopu Úvod do programování. Ať se ti daří!</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="exercise2" data-toggle="collapse" data-target="#collapseExercise2" aria-expanded="true" aria-controls="collapseExercise2">
                        <h2 class="mb-0">
                            Příklad 2 – Základní operace
                        </h2>
                    </div>
​
                    <div id="collapseExercise2" class="collapse" aria-labelledby="exercise2" data-parent="#exercises">
                        <div class="card-body">
                            <p><strong>Zadání:</strong> Uživatel zadá do připravených políček dvě celá čísla.
                                Tvým úkolem je spočítat jejich součet, rozdíl, součin a podíl. Každá operace má vlastní tlačítko. Výsledek vždy ulož do proměnné <code>vysledek</code>.</p>
                            <div class="exercise">
                                <div class="form-group">
                                    <input type="number" class="form-control" id="exercise2number1" />
                                    <input type="number" class="form-control" id="exercise2number2" />
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-primary mb-2" id="submit2add">+</button>
                                    <button class="btn btn-primary mb-2" id="submit2substract">–</button>
                                    <button class="btn btn-primary mb-2" id="submit2multiply">*</button>
                                    <button class="btn btn-primary mb-2" id="submit2divide">/</button>
                                </div>
                                <div id="error2" class="error hidden">Některé z čísel není celé číslo!</div>
                                <p>Výsledek: <span class="result" id="result2">&nbsp;</span></p>
                            </div>
                            <div class="tip">
                                <div class="icon">?</div>
                                <div class="text">
                                    Datový typ proměnné <code>vysledek</code> je <code>int?</code>.
                                    Otazník za názvem datového typu počítači říká, že proměnná může obsahovat <code>null</code>, tedy 
                                    neplatnou hodnotu. Až budeš vytvářet vlastní proměnné, používej označení datového typu bez otazníku, např. <code>int</code>.
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="tip">
                                <div class="icon">!</div>
                                <div class="text">
                                    Všimni si, že pro výsledek sčítání, odčítání a násobení používáme datový typ <code>int</code>, tedy celá čísla.
                                    Pro dělení jsme ale použili <code>double</code> – datový typ pro desetinná čísla.
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header optional" id="exercise3" data-toggle="collapse" data-target="#collapseExercise3" aria-expanded="true" aria-controls="collapseExercise3">
                        <h2 class="mb-0">
                            Příklad 3 – Základní operace
                        </h2>
                    </div>
​
                    <div id="collapseExercise3" class="collapse" aria-labelledby="exercise3" data-parent="#exercises">
                        <div class="card-body">
                            <p><strong>Zadání:</strong> Uživatel zadá do připraveného políčka cenu zboží. Sleva na zboží je 15 %. Spočítej cenu zboží po slevě. Výsledek ulož do proměnné <code>cenaPoSleve</code>.</p>
                            <div class="exercise">
                                <div class="form-group">
                                    <input type="number" class="form-control" id="exercise3number" /> Kč
                                </div>
                                <button class="btn btn-primary mb-2" id="submit3">Odeslat</button>
                                <div id="error3" class="error hidden">Číslo není kladné!</div>
                                <p>Cena zboží po slevě: <span class="result" id="result3">&nbsp;</span> Kč</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header optional" id="exercise4" data-toggle="collapse" data-target="#collapseExercise4" aria-expanded="true" aria-controls="collapseExercise4">
                        <h2 class="mb-0">
                            Příklad 4 – Základní operace
                        </h2>
                    </div>
​
                    <div id="collapseExercise4" class="collapse" aria-labelledby="exercise4" data-parent="#exercises">
                        <div class="card-body">
                            <p><strong>Zadání:</strong> Uživatel zadá do připravených políček dvě čísla. Spočítej průměr těchto dvou čísel. Výsledek ulož do proměnné <code>prumer</code>.</p>
                            <div class="exercise">
                                <div class="form-group">
                                    <input type="number" class="form-control" id="exercise4number1" />
                                    <input type="number" class="form-control" id="exercise4number2" />
                                </div>
                                <button class="btn btn-primary mb-2" id="submit4">Odeslat</button>
                                <p>Průměr čísel: <span class="result" id="result4">&nbsp;</span></p>
                            </div>
                            <div class="tip">
                                <div class="icon">?</div>
                                <div class="text">
                                    Průměr dvou čísel c<sub>1</sub> a c<sub>2</sub> se spočítá jako (c<sub>1</sub> + c<sub>2</sub>)/2.
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header optional" id="exercise5" data-toggle="collapse" data-target="#collapseExercise5" aria-expanded="true" aria-controls="collapseExercise5">
                        <h2 class="mb-0">
                            Příklad 5 – Základní operace
                        </h2>
                    </div>
​
                    <div id="collapseExercise5" class="collapse" aria-labelledby="exercise5" data-parent="#exercises">
                        <div class="card-body">
                            <p><strong>Zadání:</strong> Uživatel zadá do připravených políček vzdálenost, kterou ujel (v kilometrech), a čas, jak dlouho mu cesta trvala (v hodinách). Spočítej průměrnou rychlost. Výsledek ulož do proměnné <code>rychlost</code>.</p>
                            <div class="exercise">
                                <div class="form-group">
                                    <label for="exercise5distance">Vzdálenost:</label>
                                    <input type="number" class="form-control" id="exercise5distance" /> km
                                </div>
                                <div class="form-group">
                                    <label for="exercise5time">Čas:</label>
                                    <input type="number" class="form-control" id="exercise5time" /> h
                                </div>
                                <button class="btn btn-primary mb-2" id="submit5">Odeslat</button>
                                <div id="error5" class="error hidden">Některé z čísel není kladné!</div>
                                <p>Průměrná rychlost: <span class="result" id="result5">&nbsp;</span> km/h</p>
                            </div>
                            <div class="tip">
                                <div class="icon">?</div>
                                <div class="text">
                                    Průměrná rychlost se spočítá jako podíl vzdálenosti a času.
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
​
        <!-- JS includes -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        
        <script type="text/javascript">
        
            $(function(){
            
                $('#submit1').click(function(){
                    var name = document.getElementById("exercise1name").value;
                    var surname = document.getElementById("exercise1surname").value;
                    document.getElementById("submit1").disabled = true;
            
                    $.ajax({
                        url: '@Url.RouteUrl(new{ action="Priklad1", controller="Home"})',
                        type: 'GET',
                        data: { jmeno: name , prijmeni: surname },
                        contentType: "application/json; charset=utf-8",
                        success: function(response) {
                            if (response !== "") {
                                document.getElementById("result1").innerHTML = response;
                            }
            
                            document.getElementById("submit1").disabled = false;
                        }
                    });
                });
            
                function showDiv(id) {
                    document.getElementById(id).classList.remove("hidden");
                    document.getElementById(id).classList.add("visible");
                }
            
                function hideDiv(id) {
                    document.getElementById(id).classList.remove("visible");
                    document.getElementById(id).classList.add("hidden");
                }
            
                function validateInt(number) {
                    return number !== "" && number !== undefined && Number.isInteger(Number(number));
                }
            
                $('#submit2add').click(function(){
                    hideDiv("error2");
            
                    var number1 = document.getElementById("exercise2number1").value;
                    var number2 = document.getElementById("exercise2number2").value;
            
                    if (!validateInt(number1) || !validateInt(number2)) {
                        showDiv("error2");
                        return;
                    }
            
                    document.getElementById("submit2add").disabled = true;
            
                    $.ajax({
                        url: '@Url.RouteUrl(new{ action="Priklad2Scitani", controller="Home"})',
                        type: 'GET',
                        data: { cislo1: number1 , cislo2: number2 },
                        contentType: "application/json; charset=utf-8",
                        success: function(response) {
                            if (response !== "") {
                                document.getElementById("result2").innerHTML = response;
                            }
            
                            document.getElementById("submit2add").disabled = false;
                        }
                    });
                });
            
                $('#submit2substract').click(function(){
                    hideDiv("error2");
            
                    var number1 = document.getElementById("exercise2number1").value;
                    var number2 = document.getElementById("exercise2number2").value;
            
                    if (!validateInt(number1) || !validateInt(number2)) {
                        showDiv("error2");
                        return;
                    }
            
                    document.getElementById("submit2substract").disabled = true;
            
                    $.ajax({
                        url: '@Url.RouteUrl(new{ action="Priklad2Odcitani", controller="Home"})',
                        type: 'GET',
                        data: { cislo1: number1 , cislo2: number2 },
                        contentType: "application/json; charset=utf-8",
                        success: function(response) {
                            if (response !== "") {
                                document.getElementById("result2").innerHTML = response;
                            }
            
                            document.getElementById("submit2substract").disabled = false;
                        }
                    });
                });
            
                $('#submit2multiply').click(function(){
                    hideDiv("error2");
            
                    var number1 = document.getElementById("exercise2number1").value;
                    var number2 = document.getElementById("exercise2number2").value;
            
                    if (!validateInt(number1) || !validateInt(number2)) {
                        showDiv("error2");
                        return;
                    }
            
                    document.getElementById("submit2multiply").disabled = true;
            
                    $.ajax({
                        url: '@Url.RouteUrl(new{ action="Priklad2Nasobeni", controller="Home"})',
                        type: 'GET',
                        data: { cislo1: number1 , cislo2: number2 },
                        contentType: "application/json; charset=utf-8",
                        success: function(response) {
                            if (response !== "") {
                                document.getElementById("result2").innerHTML = response;
                            }
            
                            document.getElementById("submit2multiply").disabled = false;
                        }
                    });
                });
            
                $('#submit2divide').click(function(){
                    hideDiv("error2");
            
                    var number1 = document.getElementById("exercise2number1").value;
                    var number2 = document.getElementById("exercise2number2").value;
            
                    if (!validateInt(number1) || !validateInt(number2)) {
                        showDiv("error2");
                        return;
                    }
            
                    document.getElementById("submit2divide").disabled = true;
            
                    $.ajax({
                        url: '@Url.RouteUrl(new{ action="Priklad2Deleni", controller="Home"})',
                        type: 'GET',
                        data: { cislo1: number1 , cislo2: number2 },
                        contentType: "application/json; charset=utf-8",
                        success: function(response) {
                            if (response !== "") {
                                document.getElementById("result2").innerHTML = response;
                            }
            
                            document.getElementById("submit2divide").disabled = false;
                        }
                    });
                });
            
                $('#submit3').click(function(){
                    hideDiv("error3");
            
                    var number = document.getElementById("exercise3number").value;
            
                    if (Number(number) <= 0) {
                        showDiv("error3");
                        return;
                    }
            
                    document.getElementById("submit3").disabled = true;
            
                    $.ajax({
                        url: '@Url.RouteUrl(new{ action="Priklad3", controller="Home"})',
                        type: 'GET',
                        data: { cena: number },
                        contentType: "application/json; charset=utf-8",
                        success: function(response) {
                            if (response !== "") {
                                document.getElementById("result3").innerHTML = response;
                            }
            
                            document.getElementById("submit3").disabled = false;
                        }
                    });
                });
            
                $('#submit4').click(function(){         
                    var number1 = document.getElementById("exercise4number1").value;
                    var number2 = document.getElementById("exercise4number2").value;
            
                    document.getElementById("submit2divide").disabled = true;
            
                    $.ajax({
                        url: '@Url.RouteUrl(new{ action="Priklad4", controller="Home"})',
                        type: 'GET',
                        data: { cislo1: number1, cislo2: number2 },
                        contentType: "application/json; charset=utf-8",
                        success: function(response) {
                            if (response !== "") {
                                document.getElementById("result4").innerHTML = response;
                            }
            
                            document.getElementById("submit4").disabled = false;
                        }
                    });
                });
            
                $('#submit5').click(function(){
                    hideDiv("error5");
            
                    var distance = document.getElementById("exercise5distance").value;
                    var time = document.getElementById("exercise5time").value;
            
                    if (Number(distance) <= 0 || Number(time) <= 0) {
                        showDiv("error5");
                        return;
                    }
            
                    document.getElementById("submit5").disabled = true;
            
                    $.ajax({
                        url: '@Url.RouteUrl(new{ action="Priklad5", controller="Home"})',
                        type: 'GET',
                        data: { vzdalenost: distance , cas: time },
                        contentType: "application/json; charset=utf-8",
                        success: function(response) {
                            if (response !== "") {
                                document.getElementById("result5").innerHTML = response;
                            }
            
                            document.getElementById("submit5").disabled = false;
                        }
                    });
                });
            });
​
        </script>
    </body>
</html>

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace UvodDoProgramovani1
{
	public class HomeController : Controller
	{
		Random _random = new Random();
	
		[HttpGet]
		public ActionResult Index()
		{
			return View();
		}

		// Příklad 1 - Vstup/výstup
		[HttpGet]
		public string Priklad1(string jmeno, string prijmeni)
		{		
			string celeJmeno = null;
			
			// Začátek tvého kódu
			celeJmeno = "jmeno" "prijmeni";
			// Konec tvého kódu
			
			return celeJmeno;
		}
		
		// Příklad 2 - Základní operace - sčítání
		[HttpGet]
		public int? Priklad2Scitani(int cislo1, int cislo2)
		{		
			int? vysledek = null;
			
			// Začátek tvého kódu
			
			// Konec tvého kódu
			
			return vysledek;
		}
		
		// Příklad 2 - Základní operace - odčítání
		[HttpGet]
		public int? Priklad2Odcitani(int cislo1, int cislo2)
		{		
			int? vysledek = null;
			
			// Začátek tvého kódu
			
			// Konec tvého kódu
			
			return vysledek;
		}
		
		// Příklad 2 - Základní operace - násobení
		[HttpGet]
		public int? Priklad2Nasobeni(int cislo1, int cislo2)
		{		
			int? vysledek = null;
			
			// Začátek tvého kódu
			
			// Konec tvého kódu
			
			return vysledek;
		}
		
		// Příklad 2 - Základní operace - dělení
		[HttpGet]
		public double? Priklad2Deleni(double cislo1, double cislo2)
		{		
			double? vysledek = null;
			
			// Začátek tvého kódu
			
			// Konec tvého kódu
			
			return vysledek;
		}
		
		// Příklad 3 - Základní operace
		[HttpGet]
		public double? Priklad3(double cena)
		{		
			double? cenaPoSleve = null;
			
			// Začátek tvého kódu
			
			// Konec tvého kódu
			
			return cenaPoSleve;
		}
		
		// Příklad 4 - Základní operace
		[HttpGet]
		public double? Priklad4(double cislo1, double cislo2)
		{		
			double? prumer = null;
			
			// Začátek tvého kódu
			
			// Konec tvého kódu
			
			return prumer;
		}
		
		// Příklad 5 - Základní operace
		[HttpGet]
		public double? Priklad5(double vzdalenost, double cas)
		{		
			double? rychlost = null;
			
			// Začátek tvého kódu
			
			// Konec tvého kódu
			
			return rychlost;
		}
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace UvodDoProgramovani1
{
    public class HomeController : Controller
    {
        Random _random = new Random();
    
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }
​
        // Příklad 1 - Vstup/výstup
        [HttpGet]
        public string Priklad1(string jmeno, string prijmeni)
        {       
            string celeJmeno = null;
            
            // Začátek tvého kódu
            celeJmeno = "jmeno" "prijmeni";
            // Konec tvého kódu
            
            return celeJmeno;
        }
        
        // Příklad 2 - Základní operace - sčítání
        [HttpGet]
        public int? Priklad2Scitani(int cislo1, int cislo2)
        {       
            int? vysledek = null;
            
            // Začátek tvého kódu
            
            // Konec tvého kódu
            
            return vysledek;
        }
        
        // Příklad 2 - Základní operace - odčítání
        [HttpGet]
        public int? Priklad2Odcitani(int cislo1, int cislo2)
        {       
            int? vysledek = null;
            
            // Začátek tvého kódu
            
            // Konec tvého kódu
            
            return vysledek;
        }
        
        // Příklad 2 - Základní operace - násobení
        [HttpGet]
        public int? Priklad2Nasobeni(int cislo1, int cislo2)
        {       
            int? vysledek = null;
            
            // Začátek tvého kódu
            
            // Konec tvého kódu
            
            return vysledek;
        }
        
        // Příklad 2 - Základní operace - dělení
        [HttpGet]
        public double? Priklad2Deleni(double cislo1, double cislo2)
        {       
            double? vysledek = null;
            
            // Začátek tvého kódu
            
            // Konec tvého kódu
            
            return vysledek;
        }
        
        // Příklad 3 - Základní operace
        [HttpGet]
        public double? Priklad3(double cena)
        {       
            double? cenaPoSleve = null;
            
            // Začátek tvého kódu
            
            // Konec tvého kódu
            
            return cenaPoSleve;
        }
        
        // Příklad 4 - Základní operace
        [HttpGet]
        public double? Priklad4(double cislo1, double cislo2)
        {       
            double? prumer = null;
            
            // Začátek tvého kódu
            
            // Konec tvého kódu
            
            return prumer;
        }
        
        // Příklad 5 - Základní operace
        [HttpGet]
        public double? Priklad5(double vzdalenost, double cas)
        {       
            double? rychlost = null;
            
            // Začátek tvého kódu
            
            // Konec tvého kódu
            
            return rychlost;
        }
    }
}

View in Full Screen

Last Run:	8:12:22 pm
Compile:	0.236s
Execute:	0s
Memory:	24kb
CPU:	0.016s

View IL Code