intro text is improved

src/components/Intro2.tsx

@@ -11,9 +11,9 @@ import Slide1 from "./intro2Components/Slide1";
 import Slide2 from "./intro2Components/Slide2";
 import Slide3 from "./intro2Components/Slide3";
 import Slide4 from "./intro2Components/Slide4";
-import Slide5 from "./intro2Components/Slide5";
 import Slide6QSR from "./intro2Components/Slide6QSR";
 import Slide6BSR from "./intro2Components/Slide6BSR";
+import Slide5 from "./intro2Components/Slide5";
 
 function Intro2({
 	aBlue,
@@ -26,7 +26,7 @@ function Intro2({
 	aBlue: number;
 	bBlue: number;
 	priors: [number, number];
-	treatment: string;
+	treatment: "QSR" | "BSR";
 	numberOfRounds: number;
 	phaseFunction: (p: Phase) => void;
 }) {
@@ -65,18 +65,13 @@ function Intro2({
 					marginBottom: "2rem",
 				}}
 			>
-				<Slide1
-					numberOfRounds={numberOfRounds}
-					diceText={diceText}
-					equal={priors[0] === 3}
-				/>
+				<Slide1 numberOfRounds={numberOfRounds} aBlue={aBlue} bBlue={bBlue} />
 				<Slide2 aBlue={aBlue} bBlue={bBlue} diceText={diceText} />
-				<Slide3 />
+				<Slide3 diceText={diceText} equal={priors[0] === 0} />
 				<Slide4 />
-				<Slide5 />
+				<Slide5 treatment={treatment} />
 				{treatment === "QSR" ? <Slide6QSR /> : <Slide6BSR />}
 			</Carousel>
-
 			<Button.Group>
 				<Button
 					variant="light"

src/components/intro2Components/Slide1.tsx

@@ -6,45 +6,38 @@ import circleStyles from "@/styles/Circles.module.css";
 
 const Slide1 = ({
 	numberOfRounds,
-	diceText,
-	equal,
+	aBlue,
+	bBlue,
 }: {
 	numberOfRounds: number;
-	diceText: [string, string];
-	equal: boolean;
+	aBlue: number;
+	bBlue: number;
 }) => {
 	return (
 		<Carousel.Slide>
 			<List className={customStyles.entryText}>
 				<List.Item>
-					<b>Turlar:</b> Deneyimiz {numberOfRounds} &quot;tur&quot;dan oluşuyor.
+					Bu deney {numberOfRounds} &quot;tur&quot;dan oluşmaktadır.
 				</List.Item>
 				<List.Item>
-					<b>Hangi Torbanın Kullanıldığını Tahmin Etme:</b> Her turda,
-					bilgisayar bir &quot;torba&quot; seçecek ve içindeki renkli bilyelerin
-					çekilişini simüle edecektir. İki farklı torba var, her biri farklı
-					sayıda renkli bilye içeriyor. Bilgisayarın hangi torbayı seçtiğini
-					tahmin etmeniz gerekecek.
+					{" "}
+					Her turda, bilgisayar size içinde 100 tane bilye bulunan iki torba
+					sunacak. Torbadaki bilyeler{" "}
+					<b className={circleStyles.redText}>kırmızı</b> ve{" "}
+					<b className={circleStyles.blueText}>mavi</b> renkte olacak. Bu
+					torbaları <b className={circleStyles.redText}>kırmızı torba</b> ve{" "}
+					<b className={circleStyles.blueText}>mavi torba</b> olarak
+					adlandıracağız.
 				</List.Item>
 				<List.Item>
-					<b>Bilgisayar Kullanacağı Torbayı Nasıl Seçiyor:</b>
-					Her turda, bilgisayar 1 ila 6 arasındaki bir sayıyı rastgele seçer.
-					Bu, bir zar atışını simgeler.
-					<List style={{ margin: "15px" }} size="xl">
-						<List.Item>
-							Zar sonucu {diceText[0]} gelirse, çekiliş{" "}
-							<b className={circleStyles.blueText}>Mavi torba</b>
-							dan yapılır. (Bu torba daha fazla mavi bilye içerir.)
-						</List.Item>
-						<List.Item>
-							Zar sonucu {diceText[1]} gelirse, çekiliş{" "}
-							<b className={circleStyles.redText}>Kırmızı torba</b>
-							dan yapılır. (Bu torba daha fazla kırmızı bilye içerir.)
-						</List.Item>
-					</List>
-					{equal && (
-						<span>Bu nedenle, iki torbanın da seçilme şansı aynıdır.</span>
-					)}
+					<b className={circleStyles.redText}>Kırmızı torba</b> içinde{" "}
+					<b>{100 - aBlue}</b> tane kırmızı ve <b>{aBlue}</b> tane mavi bilye
+					olacak. <b className={circleStyles.blueText}>Mavi torba</b> içinde ise{" "}
+					<b>{bBlue}</b> tane mavi ve <b>{100 - bBlue}</b> tane kırmızı bilye
+					olacak.
+				</List.Item>
+				<List.Item>
+					Bir sonraki sayfada bu torbaların resimlerini görebilirsiniz.
 				</List.Item>
 			</List>
 		</Carousel.Slide>

src/components/intro2Components/Slide2.tsx

@@ -14,10 +14,6 @@ const Slide2 = ({
 	return (
 		<Carousel.Slide>
 			<BagHolder aBlue={aBlue} bBlue={bBlue} diceText={diceText} />
-			<div className={customStyles.entryText}>
-				<b>Renkli Bilyeler: </b> Her iki torbanın içindeki bilyeleri yukarıda
-				görebilirsiniz.
-			</div>
 		</Carousel.Slide>
 	);
 };

src/components/intro2Components/Slide3.tsx

@@ -2,35 +2,45 @@ import { List } from "@mantine/core";
 import { Carousel } from "@mantine/carousel";
 
 import customStyles from "@/styles/Custom.module.css";
+import circleStyles from "@/styles/Circles.module.css";
 
-const Slide3 = () => {
+const Slide3 = ({
+	diceText,
+	equal,
+}: {
+	diceText: [string, string];
+	equal: boolean;
+}) => {
 	return (
 		<Carousel.Slide>
 			<List className={customStyles.entryText}>
 				<List.Item>
-					<b>Kullanılan Torba:</b> Zar atışının sonucu size önceden
-					söylenmeyecek, bu nedenle çekiliş için hangi torbanın kullanıldığını
-					bilemezsiniz. Her turda, her katılımcı için ayrı bir zar atılır.
+					Her turun başında, bilgisayar rastgele bir torba seçecek
+					{equal && (
+						<span>
+							{" "}
+							ve bilgisayarın kırmızı veya mavi torbayı seçme olasılığı eşit
+							olacak
+						</span>
+					)}
+					.
 				</List.Item>
 				<List.Item>
-					<b>Çekilişler kişiye özeldir:</b> Bilgisayar zar atışı sonrası
-					kullanılacak torbayı belirler. Sonra o torbadan bir veya daha fazla
-					bilye çekilir. Bu çekilişler, hangi torbanın kullanıldığını tahmin
-					etmek için size ipucu sağlayabilir.
+					Bilgisayarın bir zar atışı yaptığını ve {diceText[0]} gelirse mavi,{" "}
+					{diceText[1]} gelirse kırmızı torbayı seçtiğini düşünebilirsiniz.
 				</List.Item>
 				<List.Item>
-					<b>Çekilişler birbirinden bağımsızdır:</b> Bazı turlarda aynı torbadan
-					birden fazla çekiliş görebilirsiniz. Bunların sonucunu çekiliş
-					sırasıyla göreceksiniz. Çekilişler bağımsız olarak yapılacak, yani
-					sanki torbayı sallayacak, içinden rastgele bir bilye seçecek, bilyeyi
-					size gösterecek, torbaya geri koyacak ve rastgele başka bir bilye
-					çekmeden önce torbayı tekrar karıştıracakmışız gibi düşünebilirsiniz.
-					Yani bir torbanın içindeki bilyelerin sayıları ve renkleri bütün
-					çekilişlerden önce her zaman aynı olacak.
+					Bilgisayarın hangi torbayı seçtiğini bilmeyeceksiniz.
 				</List.Item>
 				<List.Item>
-					<b>Her çekiliş sonrası bilye torbaya geri konur:</b> Çekilen bilye,
-					her çekilişten sonra torbaya geri konmuş gibi olur.
+					Bilgisayar torbayı belirledikten sonra, seçtiği torbanın içinden
+					rastgele bir veya birden fazla bilye çekecek. Her bilye çekildikten
+					sonra torbaya geri konulacak.
+				</List.Item>
+				<List.Item>
+					Çekiliş sonuçlarını gördükten sonra sizden bilgisayarın seçtiği
+					torbanın <b className={circleStyles.redText}>kırmızı</b> olma
+					ihtimalini <b>yüzde</b> olarak belirlemenizi isteyeceğiz.
 				</List.Item>
 			</List>
 		</Carousel.Slide>

src/components/intro2Components/Slide4.tsx

@@ -1,34 +1,45 @@
 import { List } from "@mantine/core";
+
 import { Carousel } from "@mantine/carousel";
 import customStyles from "@/styles/Custom.module.css";
+import circleStyles from "@/styles/Circles.module.css";
+import Slider from "../experimentComponents/Slider";
+import { useState } from "react";
 
 const Slide4 = () => {
+	const [sliderValue, setSliderValue] = useState(50);
 	return (
 		<Carousel.Slide>
 			<List className={customStyles.entryText}>
 				<List.Item>
-					Çekiliş sonuçlarını gördükten sonra, kullanılan torbanın Kırmızı torba
-					olma ihtimalini
+					Kullanılan torbanın <b className={circleStyles.redText}>kırmızı</b>{" "}
+					olma ihtimalini{" "}
 					<b>
-						<em> yüzde olarak</em>
+						<i>(yüzde olarak)</i>
 					</b>{" "}
-					belirlemelisiniz.
-				</List.Item>
-				<List.Item>
-					Torbaların içeriğini göz önünde bulundurarak, hem torbanın nasıl
-					seçildiğine hem de alakalı çekiliş veya çekilişlerin sonucuna ilişkin
-					bilgileri kullanabilirsiniz.
+					aşağıdaki çubuk üzerindeki gri yuvarlağı sağa veya sola sürükleyerek
+					belirtmenizi isteyeceğiz.
 				</List.Item>
 				<List.Item>
-					Şayet kararınız 0 ise, bu Kırmızı torbanın kullanılma ihtimalinin
-					olmadığını düşündüğünüz anlamına gelir. Kararınız 100 ise, Kırmızı
-					torbanın kullanıldığından kesinlikle emin olduğunuz anlamına gelir.
-					Kararınız 50 ise, her bir torbanın kullanılmış olma ihtimalinin eşit
-					olduğunu düşündüğünüz anlamına gelir. Kırmızı torbanın kullanılma
-					ihtimalinin daha yüksek olduğunu düşünüyorsanız, 50&apos;nin üzerinde
-					bir sayı seçin. Mavi torbanın kullanılma ihtimalinin daha yüksek
-					olduğunu düşünüyorsanız 50&apos;nin altında bir sayı seçin.
+					Soldaki <b className={circleStyles.redText}>kırmızı</b> renkle yazılan
+					rakam, torbanın <b className={circleStyles.redText}>kırmızı</b> olma
+					ihtimalini, mavi renkle yazılan rakam ise yine torbanın{" "}
+					<b className={circleStyles.blueText}>mavi</b> olma ihtimalini
+					göstermektedir.
 				</List.Item>
+				<div
+					style={{
+						display: "flex",
+						justifyContent: "center",
+					}}
+				>
+					<Slider
+						value={sliderValue}
+						updatingFunction={(event) => {
+							setSliderValue(Number(event.target.value));
+						}}
+					/>
+				</div>
 			</List>
 		</Carousel.Slide>
 	);

src/components/intro2Components/Slide5.tsx

@@ -1,48 +1,62 @@
-import { List } from "@mantine/core";
-
-import { Carousel } from "@mantine/carousel";
+import Circles from "../experimentComponents/Circles";
+import Slider from "../experimentComponents/Slider";
 import customStyles from "@/styles/Custom.module.css";
 import circleStyles from "@/styles/Circles.module.css";
-import Slider from "../experimentComponents/Slider";
+import { List } from "@mantine/core";
+import { Carousel } from "@mantine/carousel";
 import { useState } from "react";
 
-const Slide5 = () => {
+const Slide5 = ({ treatment }: { treatment: "QSR" | "BSR" }) => {
 	const [sliderValue, setSliderValue] = useState(50);
 	return (
 		<Carousel.Slide>
-			<List className={customStyles.entryText}>
+			<List
+				className={customStyles.entryText}
+				// style={{ marginTop: "0px", fontSize: "0.8rem" }}
+				style={{ marginTop: "0px", scale: "0.9" }}
+			>
 				<List.Item>
-					Kullanılan torbanın <b className={circleStyles.redText}>kırmızı</b>{" "}
-					veya <b className={circleStyles.blueText}>mavi</b> olma ihtimalinin{" "}
-					<b>
-						<i>100&apos;de kaç olduğunu</i>
-					</b>{" "}
-					ekrandaki bir kaydırıcıyı sağa ya da sola sürükleyerek
-					bildireceksiniz. Aşağıda bu kaydırıcıyı görebilirsiniz.
+					Çubuk üzerinde bilyenin kırmızı olma olasılığını seçtikten sonra,
+					deneyden elde edeceğiniz kazancı belirlemek için{" "}
+					<b className={circleStyles.redText}>kırmızı</b> ve{" "}
+					<b className={circleStyles.blueText}>mavi</b> renkte iki simit
+					kullanacağız.
 				</List.Item>
 				<List.Item>
-					Şimdi dilerseniz bunu sağa ya da sola sürüklemeyi deneyin. Soldaki ve
-					sağdaki rakamların değiştiğini göreceksiniz. Solda kırmızı renkle
-					yazılan rakam, sizce kullanılan torbanın{" "}
-					<b className={circleStyles.redText}>Kırmızı torba</b> olma ihtimalinin
-					100’de kaç olduğunu gösterir. Sağda mavi renkle yazılan rakam sizce
-					kullanılan torbanın <b className={circleStyles.blueText}>Mavi</b> olma
-					ihtimalinin 100&apos;de kaç olduğunu gösterir.
+					{treatment === "QSR" && (
+						<span>
+							Daha büyük bir simit daha yüksek bir puana denk gelmektedir.{" "}
+						</span>
+					)}
+					Çubuğun üzerindeki gri yuvarlağı sağa veya sola sürüklediğinizde
+					simitlerin boyutlarının değiştiğini göreceksiniz.
 				</List.Item>
-				<div
-					style={{
-						display: "flex",
-						justifyContent: "center",
-					}}
-				>
+				{treatment === "QSR" && (
+					<List.Item>Puanlar simidin ortasında belirtilmiştir.</List.Item>
+				)}
+			</List>
+			<div
+				style={{
+					display: "flex",
+					flexDirection: "column",
+					alignContent: "center",
+				}}
+			>
+				<div>
 					<Slider
 						value={sliderValue}
 						updatingFunction={(event) => {
 							setSliderValue(Number(event.target.value));
 						}}
 					/>
 				</div>
-			</List>
+				<Circles
+					value={sliderValue}
+					bsr={treatment === "BSR"}
+					showResult={false}
+					chooseCircle={"blue"}
+				/>
+			</div>
 		</Carousel.Slide>
 	);
 };

src/components/intro2Components/Slide6BSR.tsx

@@ -16,22 +16,23 @@ const Slide6BSR = () => {
 			<List
 				className={customStyles.entryText}
 				style={{ marginTop: "0px", scale: "0.9" }}
+				// style={{ marginTop: "0px", fontSize: "0.8rem" }}
 			>
 				<List.Item>
-					Karar ekranında, bahsettiğimiz kaydırıcının tam altında kırmızı ve
-					mavi birer simit olacak. Kaydırıcıyı sağa ya da sola sürükledikçe
-					kırmızı simidin ve mavi simidin büyüklüklerinin değiştiğini
-					görebilirsiniz.
-				</List.Item>
+					{" "}
+					Kararınızı belirttikten sonra, eğer bilgisayar kırmızı torbayı seçmiş
+					ise kırmızı simit, mavi torbayı seçmiş ise mavi simit ekranda kalacak,
+					diğer simit kaybolacak. ·{" "}
+				</List.Item>{" "}
 				<List.Item>
-					Karar verdikten sonra, çekiliş için gerçekte hangi torba kullanıldıya
-					yalnızca o renkteki simit kalacak, diğer simit kaybolacak. Ardından,
-					bu simit ve içindeki alanın teşkil ettiği daireden rastgele bir nokta
-					seçilecek.
-				</List.Item>
+					{" "}
+					Kazancınızı belirlemek için, bilgisayar ekranda kalan simit üzerinde
+					rastgele bir nokta seçecek. ·{" "}
+				</List.Item>{" "}
 				<List.Item>
-					Eğer bu nokta ilgili simite, yani tam dairenin renkli kısmına denk
-					düşerse, kazancınız 10000 puan, aksi takdirde 0 puan olacak.
+					{" "}
+					Eğer bu nokta, simitin renkli kısmına düşerse 10000 puan, aksi
+					takdirde 0 puan kazanacaksınız.
 				</List.Item>
 			</List>
 			<div